diff --git a/web/client/components/TOC/TOCItemsSettings.jsx b/web/client/components/TOC/TOCItemsSettings.jsx
index bc7b9668758..5a56b5f14e9 100644
--- a/web/client/components/TOC/TOCItemsSettings.jsx
+++ b/web/client/components/TOC/TOCItemsSettings.jsx
@@ -100,6 +100,7 @@ const TOCItemSettings = (props) => {
                                     <NavItemT
                                         key={'ms-tab-settings-' + tab.id}
                                         tooltip={<Message msgId={tab.tooltipId}/> }
+                                        data-ms-id={`edit-style-btn-${tab.glyph}`}
                                         eventKey={tab.id}
                                         onClick={() => {
                                             onSetTab(tab.id);
diff --git a/web/client/components/catalog/Catalog.jsx b/web/client/components/catalog/Catalog.jsx
index a23d221f2c8..f89d94ca9d7 100644
--- a/web/client/components/catalog/Catalog.jsx
+++ b/web/client/components/catalog/Catalog.jsx
@@ -304,7 +304,7 @@ class Catalog extends React.Component {
                         this.search({ services: this.props.services, selectedService: this.props.selectedService, searchText: this.props.searchText });
                     }
                 }}
-                className={this.props.buttonClassName} key="catalog_search_button" disabled={this.props.loading || !this.isValidServiceSelected()}>
+                className={this.props.buttonClassName} key="catalog_search_button" data-ms-id="catalog-search-button" disabled={this.props.loading || !this.isValidServiceSelected()}>
                 <Message msgId="catalog.search" />
             </Button>);
         }
@@ -321,6 +321,7 @@ class Catalog extends React.Component {
         const textSearch = (<FormControl
             ref="searchText"
             type="text"
+            data-ms-id="catalog-search"
             style={{
                 textOverflow: "ellipsis"
             }}
@@ -356,7 +357,7 @@ class Catalog extends React.Component {
                                 onClick={() => this.props.onChangeCatalogMode("edit", false)}>
                                 <Glyphicon glyph="pencil" />
                             </InputGroup.Addon>) : null}
-                            {this.props.canEdit && <InputGroup.Addon className="btn" onClick={() => this.props.onChangeCatalogMode("edit", true)}>
+                            {this.props.canEdit && <InputGroup.Addon className="btn" data-ms-id="catalog-add-service" onClick={() => this.props.onChangeCatalogMode("edit", true)}>
                                 <Glyphicon glyph="plus" />
                             </InputGroup.Addon>}
                         </InputGroup>
diff --git a/web/client/components/catalog/CatalogServiceEditor.jsx b/web/client/components/catalog/CatalogServiceEditor.jsx
index a83d6201ea3..0a80094be23 100644
--- a/web/client/components/catalog/CatalogServiceEditor.jsx
+++ b/web/client/components/catalog/CatalogServiceEditor.jsx
@@ -110,17 +110,17 @@ const CatalogServiceEditor = ({
             />
             <FormGroup controlId="buttons" key="buttons">
                 <Col xs={12}>
-                    <Button style={buttonStyle} disabled={saving || !valid} onClick={onSaveService} key="catalog_add_service_button">
+                    <Button style={buttonStyle} disabled={saving || !valid} onClick={onSaveService} key="catalog_add_service_button" data-ms-id="catalog-save">
                         {saving ? <Loader size={12} style={{display: 'inline-block'}} /> : null}
                         <Message msgId="save" />
                     </Button>
                     {service && !service.isNew
-                        ? <Button style={buttonStyle} disabled={saving} onClick={() => onDeleteService(service, services)} key="catalog_delete_service_button">
+                        ? <Button style={buttonStyle} disabled={saving} onClick={() => onDeleteService(service, services)} key="catalog_delete_service_button" data-ms-id="catalog-delete">
                             <Message msgId="catalog.delete" />
                         </Button>
                         : null
                     }
-                    <Button style={buttonStyle} disabled={disabled} onClick={onCancel} key="catalog_back_view_button">
+                    <Button style={buttonStyle} disabled={disabled} onClick={onCancel} key="catalog_back_view_button" data-ms-id="catalog-cancel">
                         <Message msgId="cancel" />
                     </Button>
                 </Col>
diff --git a/web/client/components/catalog/RecordItem.jsx b/web/client/components/catalog/RecordItem.jsx
index f9cf8ec8583..72a9582c434 100644
--- a/web/client/components/catalog/RecordItem.jsx
+++ b/web/client/components/catalog/RecordItem.jsx
@@ -217,6 +217,7 @@ class RecordItem extends React.Component {
                 disabled: this.state.loading,
                 loading: this.state.loading,
                 glyph: 'plus',
+                'data-ms-id': 'catalog-add-first-result',
                 onClick: () => this.onAddToMap(record)
             }]),
             ...(links.length > 0
diff --git a/web/client/components/catalog/editor/MainForm.jsx b/web/client/components/catalog/editor/MainForm.jsx
index ef562f28185..09bd934dd73 100644
--- a/web/client/components/catalog/editor/MainForm.jsx
+++ b/web/client/components/catalog/editor/MainForm.jsx
@@ -51,6 +51,7 @@ const DefaultURLEditor = ({
 
     const UrlForm = (<FormControl
         type="text"
+        data-ms-id="catalog-service-url"
         style={{
             textOverflow: "ellipsis"
         }}
@@ -203,6 +204,7 @@ export default ({
                     <FormControl
                         onChange={(e) => onChangeType(e.target.value)}
                         value={service && service.type}
+                        data-ms-id="catalog-service-type"
                         componentClass="select">
                         {serviceTypes.map((type) => <option value={type.name} key={type.name}>{type.label}</option>)}
                     </FormControl>
@@ -211,6 +213,7 @@ export default ({
                     <ControlLabel><Message msgId="catalog.serviceTitle" /></ControlLabel>
                     <FormControl
                         type="text"
+                        data-ms-id="catalog-service-title"
                         style={{
                             textOverflow: "ellipsis"
                         }}
diff --git a/web/client/components/cookie/Cookie.jsx b/web/client/components/cookie/Cookie.jsx
index 365dcb2e271..e1d70476430 100644
--- a/web/client/components/cookie/Cookie.jsx
+++ b/web/client/components/cookie/Cookie.jsx
@@ -52,6 +52,7 @@ class Cookie extends React.Component {
     renderAcceptButton = () => {
         return (
             <Button
+                data-ms-id="cookie-accept-button"
                 className="cookie-button"
                 id="accept-cookie"
                 bsStyle="primary"
@@ -63,10 +64,11 @@ class Cookie extends React.Component {
     renderMoreDetails = () => {
         return this.props.externalCookieUrl ?
             (
-                <a style={{cursor: "pointer"}}
+                <a data-ms-id="cookie-privacy-link" style={{cursor: "pointer"}}
                     id="accept-cookie"
                     href={this.props.externalCookieUrl}>
                     <Button
+                        data-ms-id="cookie-privacy-text"
                         className="cookie-button"
                         id="decline-cookie"
                         bsStyle="primary" >
@@ -95,14 +97,14 @@ class Cookie extends React.Component {
     }
     render() {
         return this.props.show ? (
-            <div className={this.props.seeMore ? "mapstore-cookie-panel see-more" : "mapstore-cookie-panel not-see-more"}>
+            <div data-ms-id="cookie-overlay" className={this.props.seeMore ? "mapstore-cookie-panel see-more" : "mapstore-cookie-panel not-see-more"}>
                 <div role="header" className="cookie-header" style={{height: this.props.seeMore ? "44px" : "0px"}}>
                     {this.props.seeMore ? <Glyphicon className="cookie-close-btn" glyph="1-close" onClick={() => this.props.onMoreDetails(false)}/> : null }
                 </div>
                 <div role="body" className="cookie-body-container">
                     {!this.props.externalCookieUrl && this.props.seeMore ? (
                         <MoreDetails html={this.props.html}/>
-                    ) : (<div className="cookie-message">
+                    ) : (<div data-ms-id="cookie-banner-maintext" className="cookie-message">
                         <Message msgId="cookie.info"/>
                     </div>) }
                     <br/>
diff --git a/web/client/components/data/download/DownloadDialog.jsx b/web/client/components/data/download/DownloadDialog.jsx
index 8ab40753ea9..de0b113f1d3 100644
--- a/web/client/components/data/download/DownloadDialog.jsx
+++ b/web/client/components/data/download/DownloadDialog.jsx
@@ -124,6 +124,17 @@ const DownloadDialog = ({
         }
     }, [enabled, selectedLayer, defaultSelectedService]); // equivalent componentDidUpdate
 
+    useEffect(() => {
+        if (!enabled) {
+            return;
+        }
+        const dialogRoot = document.querySelector('#mapstore-export');
+        dialogRoot?.setAttribute('data-ms-id', 'dataset-export-box');
+
+        const formatInput = document.querySelector('#mapstore-export .mapstore-downloadoptions:not(.downloadMode) .Select-input input');
+        formatInput?.setAttribute('data-ms-id', 'dataset-export-select-format');
+    }, [enabled, downloadOptions, service, showLoader]);
+
     const renderIcon = () => {
         return loading ? <div style={{"float": "left"}}><Spinner spinnerName="circle" noFadeIn/></div> : <Glyphicon glyph="download" />;
     };
@@ -153,7 +164,13 @@ const DownloadDialog = ({
         <Dialog id="mapstore-export" draggable={false} modal>
             <span role="header">
                 <span className="modal-title  about-panel-title"><Message msgId="layerdownload.title" /></span>
-                <button onClick={onClose} className="settings-panel-close close">{closeGlyph ? <Glyphicon glyph={closeGlyph}/> : <span>×</span>}</button>
+                <button
+                    onClick={onClose}
+                    className="settings-panel-close close"
+                    {...{ 'data-ms-id': 'dataset-export-box-close' }}
+                >
+                    {closeGlyph ? <Glyphicon glyph={closeGlyph}/> : <span>×</span>}
+                </button>
             </span>
             <div role="body">
                 {showLoader
@@ -190,6 +207,7 @@ const DownloadDialog = ({
                 <Button
                     bsStyle="primary"
                     className="download-button"
+                    {...{ 'data-ms-id': 'dataset-export-box-export' }}
                     disabled={formatsLoading || formats.length === 0}
                     onClick={handleExport}>
                     {renderIcon()} <Message msgId="layerdownload.export" />
diff --git a/web/client/components/data/download/DownloadOptions.jsx b/web/client/components/data/download/DownloadOptions.jsx
index 57680e146b1..4d4b4bdbb38 100644
--- a/web/client/components/data/download/DownloadOptions.jsx
+++ b/web/client/components/data/download/DownloadOptions.jsx
@@ -137,14 +137,16 @@ class DownloadOptions extends React.Component {
 
             <div className="mapstore-downloadoptions">
                 <label><Message msgId="layerdownload.format" /></label>
-                <Select
-                    clearable={false}
-                    isLoading={this.props.formatsLoading}
-                    onOpen={() => this.props.formatOptionsFetch(this.props.layer)}
-                    value={this.props.downloadOptions?.selectedFormat}
-                    noResultsText={<Message msgId="layerdownload.format" />}
-                    onChange={(sel) => this.props.onChange("selectedFormat", sel.value)}
-                    options={this.props.formats.map(f => ({value: f.name, label: f.label || f.name}))} />
+                <div {...{ 'data-ms-id': 'dataset-export-select-format' }}>
+                    <Select
+                        clearable={false}
+                        isLoading={this.props.formatsLoading}
+                        onOpen={() => this.props.formatOptionsFetch(this.props.layer)}
+                        value={this.props.downloadOptions?.selectedFormat}
+                        noResultsText={<Message msgId="layerdownload.format" />}
+                        onChange={(sel) => this.props.onChange("selectedFormat", sel.value)}
+                        options={this.props.formats.map(f => ({value: f.name, label: f.label || f.name}))} />
+                </div>
             </div>
 
             <DownloadWPSOptions
diff --git a/web/client/components/data/download/DownloadWPSOptions.jsx b/web/client/components/data/download/DownloadWPSOptions.jsx
index c7ba859e66f..cf53942dd68 100644
--- a/web/client/components/data/download/DownloadWPSOptions.jsx
+++ b/web/client/components/data/download/DownloadWPSOptions.jsx
@@ -42,10 +42,22 @@ const DownloadWPSOptions = ({
         onChange('compression', selectedCompression || head(compressionOptions));
     }, []);
 
+    useEffect(() => {
+        if (!advancedOptionsOpened) {
+            return;
+        }
+        const srsInput = document.querySelector('.mapstore-downloadwpsoptions-advanced .mapstore-downloadwpsoptions-advanced-menuitem .Select-input input');
+        srsInput?.setAttribute('data-ms-id', 'dataset-export-select-reference-system');
+    }, [advancedOptionsOpened, selectedSrs, srsList]);
+
     return (
         <>
             {advancedOptionsVisible && <div className="mapstore-downloadwpsoptions-advanced-options">
-                <Button className="no-border" onClick={() => openAdvancedOptions(!advancedOptionsOpened)}>
+                <Button
+                    className="no-border"
+                    {...{ 'data-ms-id': 'dataset-export-toggle-advanced' }}
+                    onClick={() => openAdvancedOptions(!advancedOptionsOpened)}
+                >
                     <Glyphicon glyph={`chevron-${advancedOptionsOpened ? 'down' : 'right'}`}/>
                     &nbsp;&nbsp;&nbsp;
                     <Message msgId="layerdownload.advancedOptions"/>
@@ -56,7 +68,7 @@ const DownloadWPSOptions = ({
 
                 {/* select SRS must be always visibile */}
                 <div className="mapstore-downloadwpsoptions-advanced-menuitem">
-                    <div className="mapstore-downloadwpsoptions-advanced-menuitem-control">
+                    <div className="mapstore-downloadwpsoptions-advanced-menuitem-control" {...{ 'data-ms-id': 'dataset-export-select-reference-system' }}>
                         <label><Message msgId="layerdownload.srs" /></label>
                         <Select
                             clearable={false}
diff --git a/web/client/components/mapviews/settings/CompactRichTextEditor.jsx b/web/client/components/mapviews/settings/CompactRichTextEditor.jsx
index 5f3acd59bd2..7398a1c7d49 100644
--- a/web/client/components/mapviews/settings/CompactRichTextEditor.jsx
+++ b/web/client/components/mapviews/settings/CompactRichTextEditor.jsx
@@ -48,78 +48,80 @@ function CompactRichTextEditor({
 }) {
 
     return (
-        <Editor
-            {...props}
-            editorStyle={{ minHeight: 200 }}
-            wrapperClassName={wrapperClassName}
-            toolbar={{
-                options: toolbarOptions || ['fontFamily', 'blockType', 'inline', 'textAlign', 'list', 'link', 'colorPicker', 'remove', 'image', 'embedded'],
-                image: {
-                    urlEnabled: true,
-                    // upload controlled via props, disabled by default
-                    uploadEnabled: props.uploadEnabled || false,
-                    alignmentEnabled: false,
-                    uploadCallback: (file) => new Promise((resolve, reject) => {
-                        const reader = new FileReader();
-                        reader.addEventListener('load', () => {
-                            resizeBase64Image(reader.result, {
-                                size: 500,
-                                type: 'image/jpeg',
-                                quality: 0.8
-                            }).then((linkBase64) => {
-                                resolve({ data: { link: linkBase64 } });
+        <div data-ms-id="add-widget-text-description">
+            <Editor
+                {...props}
+                editorStyle={{ minHeight: 200 }}
+                wrapperClassName={wrapperClassName}
+                toolbar={{
+                    options: toolbarOptions || ['fontFamily', 'blockType', 'inline', 'textAlign', 'list', 'link', 'colorPicker', 'remove', 'image', 'embedded'],
+                    image: {
+                        urlEnabled: true,
+                        // upload controlled via props, disabled by default
+                        uploadEnabled: props.uploadEnabled || false,
+                        alignmentEnabled: false,
+                        uploadCallback: (file) => new Promise((resolve, reject) => {
+                            const reader = new FileReader();
+                            reader.addEventListener('load', () => {
+                                resizeBase64Image(reader.result, {
+                                    size: 500,
+                                    type: 'image/jpeg',
+                                    quality: 0.8
+                                }).then((linkBase64) => {
+                                    resolve({ data: { link: linkBase64 } });
+                                });
                             });
-                        });
-                        if (file) {
-                            reader.readAsDataURL(file);
-                        } else {
-                            reject();
+                            if (file) {
+                                reader.readAsDataURL(file);
+                            } else {
+                                reject();
+                            }
+                        }),
+                        previewImage: true,
+                        inputAccept: 'image/gif,image/jpeg,image/jpg,image/png,image/svg',
+                        alt: props.alt || { present: false, mandatory: false },
+                        defaultSize: {
+                            height: 'auto',
+                            width: '100%'
                         }
-                    }),
-                    previewImage: true,
-                    inputAccept: 'image/gif,image/jpeg,image/jpg,image/png,image/svg',
-                    alt: props.alt || { present: false, mandatory: false },
-                    defaultSize: {
-                        height: 'auto',
-                        width: '100%'
-                    }
-                },
-                fontFamily: {
-                    // Setup fonts via props or use default from GeoStories
-                    options: props.fonts || DEFAULT_FONT_FAMILIES
-                },
-                link: {
-                    inDropdown: false,
-                    showOpenOptionOnHover: true,
-                    defaultTargetOption: '_self',
-                    options: ['link', 'unlink']
-                },
-                blockType: {
-                    inDropdown: true,
-                    options: ['Normal', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'Blockquote', 'Code']
-                },
-                inline: {
-                    inDropdown: true,
-                    options: ['bold', 'italic', 'underline', 'strikethrough', 'monospace']
-                },
-                textAlign: {
-                    inDropdown: true
-                },
-                list: {
-                    inDropdown: true
-                },
-                embedded: {
-                    embedCallback: link => {
-                        const detectedSrc = /<iframe.*? src="(.*?)"/.exec(embed(link));
-                        return (detectedSrc && detectedSrc[1]) || link;
                     },
-                    defaultSize: {
-                        height: 'auto',
-                        width: '100%'
+                    fontFamily: {
+                        // Setup fonts via props or use default from GeoStories
+                        options: props.fonts || DEFAULT_FONT_FAMILIES
+                    },
+                    link: {
+                        inDropdown: false,
+                        showOpenOptionOnHover: true,
+                        defaultTargetOption: '_self',
+                        options: ['link', 'unlink']
+                    },
+                    blockType: {
+                        inDropdown: true,
+                        options: ['Normal', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'Blockquote', 'Code']
+                    },
+                    inline: {
+                        inDropdown: true,
+                        options: ['bold', 'italic', 'underline', 'strikethrough', 'monospace']
+                    },
+                    textAlign: {
+                        inDropdown: true
+                    },
+                    list: {
+                        inDropdown: true
+                    },
+                    embedded: {
+                        embedCallback: link => {
+                            const detectedSrc = /<iframe.*? src="(.*?)"/.exec(embed(link));
+                            return (detectedSrc && detectedSrc[1]) || link;
+                        },
+                        defaultSize: {
+                            height: 'auto',
+                            width: '100%'
+                        }
                     }
-                }
-            }}
-        />
+                }}
+            />
+        </div>
     );
 }
 
diff --git a/web/client/components/widgets/builder/wizard/text/TextOptions.jsx b/web/client/components/widgets/builder/wizard/text/TextOptions.jsx
index 9e3cbe0c4b5..9cc1d8392ce 100644
--- a/web/client/components/widgets/builder/wizard/text/TextOptions.jsx
+++ b/web/client/components/widgets/builder/wizard/text/TextOptions.jsx
@@ -38,6 +38,7 @@ function TextOptions({ data = {}, onChange = () => {} }) {
                                 style={{ marginBottom: 10 }}
                                 placeholder="widgets.builder.wizard.titlePlaceholder"
                                 value={data.title}
+                                data-ms-id="add-widget-text-title"
                                 type="text"
                                 onChange={(e) =>
                                     onChange("title", e.target.value)
diff --git a/web/client/plugins/DrawerMenu.jsx b/web/client/plugins/DrawerMenu.jsx
index b3a09d04326..7ce68d1d7ed 100644
--- a/web/client/plugins/DrawerMenu.jsx
+++ b/web/client/plugins/DrawerMenu.jsx
@@ -63,6 +63,7 @@ const DrawerButton = connect(state => ({
 }) =>
     <Button
         id={id}
+        data-ms-id="drawer-menu-button"
         style={menuButtonStyle}
         bsStyle={buttonStyle}
         key="menu-button"
diff --git a/web/client/plugins/Measure.jsx b/web/client/plugins/Measure.jsx
index 19558db40c6..870983dd2e5 100644
--- a/web/client/plugins/Measure.jsx
+++ b/web/client/plugins/Measure.jsx
@@ -175,7 +175,7 @@ const MeasurePlugin = connect(
     }))
 )(({coordsAeronauticalEnabled, ...props}) => {
     return (
-        <div className={props.mapType !== MapLibraries.CESIUM && props?.defaultOptions?.showCoordinateEditor ? "measure-container measure-coords-editor" : "measure-container"} style={{top: coordsAeronauticalEnabled ? 88 : 48}}>
+        <div className={props.mapType !== MapLibraries.CESIUM && props?.defaultOptions?.showCoordinateEditor ? "measure-container measure-coords-editor" : "measure-container"} style={{top: coordsAeronauticalEnabled ? 88 : 48}} data-ms-id="measure-container">
             {
                 props.mapType === MapLibraries.CESIUM
                     ? <div id="measure-cesium-wrapper"/>
diff --git a/web/client/plugins/MetadataExplorer.jsx b/web/client/plugins/MetadataExplorer.jsx
index 1cd14dcc019..a8c326ac2e8 100644
--- a/web/client/plugins/MetadataExplorer.jsx
+++ b/web/client/plugins/MetadataExplorer.jsx
@@ -254,7 +254,7 @@ class MetadataExplorerComponent extends React.Component {
                 glyph="folder-open"
                 style={this.props.dockStyle}
             >
-                <Panel id={this.props.id} style={this.props.panelStyle} className={this.props.panelClassName}>
+                <Panel id={this.props.id} data-ms-id="catalog-panel" style={this.props.panelStyle} className={this.props.panelClassName}>
                     {panel}
                 </Panel>
             </ResponsivePanel>
@@ -332,6 +332,7 @@ const AddLayerButton = connect(() => ({}), {
         return (
             <ItemComponent
                 {...props}
+                data-ms-id="toc-add-layer"
                 glyph="add-layer"
                 tooltipId={status === statusTypes.GROUP ? 'toc.addLayerToGroup' : 'toc.addLayer'}
                 onClick={() => onClick(group)}
diff --git a/web/client/plugins/ResourcesCatalog/ResourcesSearch.jsx b/web/client/plugins/ResourcesCatalog/ResourcesSearch.jsx
index 698b91a9a07..946bd8b9506 100644
--- a/web/client/plugins/ResourcesCatalog/ResourcesSearch.jsx
+++ b/web/client/plugins/ResourcesCatalog/ResourcesSearch.jsx
@@ -103,6 +103,7 @@ function ResourcesSearch({
                     onChange={(q) => onSearch({ params: { q } })}
                     debounceTime={debounceTime}
                     placeholder="maps.search"
+                    data-ms-id="catalogue-search"
                 />
                 {!isEmpty(query) ? <ResourcesSearchTool
                     glyph={'1-close'}
diff --git a/web/client/plugins/ResourcesCatalog/components/DetailsHeader.jsx b/web/client/plugins/ResourcesCatalog/components/DetailsHeader.jsx
index 0d57e33fdbd..f40caaf9c9e 100644
--- a/web/client/plugins/ResourcesCatalog/components/DetailsHeader.jsx
+++ b/web/client/plugins/ResourcesCatalog/components/DetailsHeader.jsx
@@ -64,6 +64,7 @@ function DetailsHeader({
                             onClick={onClose}
                             square
                             borderTransparent
+                            data-ms-id="dataset-view-sidepanel-close"
                         >
                             <Glyphicon glyph="1-close" />
                         </Button>
@@ -83,7 +84,7 @@ function DetailsHeader({
             <div ref={titleNodeRef}></div>
             <FlexBox className="ms-details-header-info" gap="sm" classNames={['_padding-md']}>
                 <FlexBox.Fill>
-                    <Text fontSize="lg">
+                    <Text fontSize="lg" data-ms-id="dataset-view-sidepanel-title">
                         {!loading ? <Glyphicon {...icon} /> : <Spinner />}{' '}
                         {title}
                     </Text>
diff --git a/web/client/plugins/ResourcesCatalog/components/DetailsInfo.jsx b/web/client/plugins/ResourcesCatalog/components/DetailsInfo.jsx
index 8c132e60d61..b564567ae07 100644
--- a/web/client/plugins/ResourcesCatalog/components/DetailsInfo.jsx
+++ b/web/client/plugins/ResourcesCatalog/components/DetailsInfo.jsx
@@ -50,7 +50,7 @@ const isFieldLabelOnly = ({style, value}) => isEmptyValue(value) && isStyleLabel
 const DetailInfoFieldLabel = ({ field }) => {
     const label = field.labelId ? <Message msgId={field.labelId} /> : field.label;
     return isStyleLabel(field.style) && field.href
-        ? (<a href={field.href} target={field.target}>{label}</a>)
+        ? (<a href={field.href} target={field.target} {...(field['data-ms-id'] ? {'data-ms-id': field['data-ms-id']} : {})}>{label}</a>)
         : label;
 };
 
@@ -60,7 +60,7 @@ function DetailsInfoField({ field, children, className }) {
     return (
         <FlexBox gap="sm" classNames={['ms-details-info-field', '_padding-b-xs', '_row']} className={className}>
             <Text className={isLinkLabel ? '' : '_label'} fontSize="sm"><DetailInfoFieldLabel field={field} /></Text>
-            {!isLinkLabel ? <FlexBox.Fill>
+            {!isLinkLabel ? <FlexBox.Fill {...(field['data-ms-id'] ? { 'data-ms-id': field['data-ms-id'] } : {})}>
                 <Text fontSize="sm">{children(values)}</Text>
             </FlexBox.Fill> : null}
         </FlexBox>
@@ -169,6 +169,7 @@ function DetailsInfoFields({ fields, formatHref, editing, onChange, query = {},
             '_relative',
             '_padding-tb-md'
         ]}
+        data-ms-id="details-info-fields"
     >
         {fields.map((field, filedIndex) => {
 
@@ -285,6 +286,26 @@ const parseTabItems = (items) => {
 };
 const isDefaultTabType = (type) => type === 'tab';
 
+const tabCyDataMap = {
+    info: 'dataset-view-sidepanel-tab-info',
+    location: 'dataset-view-sidepanel-tab-location',
+    locations: 'dataset-view-sidepanel-tab-location',
+    assets: 'dataset-view-sidepanel-tab-assets',
+    data: 'dataset-view-sidepanel-tab-data',
+    related: 'dataset-view-sidepanel-tab-data',
+    share: 'dataset-view-sidepanel-tab-share',
+    settings: 'dataset-view-sidepanel-tab-settings'
+};
+
+const getTabCyData = (tab = {}) => {
+    const normalizedId = `${tab?.id || ''}`.toLowerCase();
+    if (tabCyDataMap[normalizedId]) {
+        return tabCyDataMap[normalizedId];
+    }
+    const normalizedLabel = `${tab?.label || ''}`.toLowerCase();
+    return tabCyDataMap[normalizedLabel] || null;
+};
+
 function DetailsInfo({
     tabs = [],
     tabComponents: tabComponentsProp,
@@ -321,9 +342,9 @@ function DetailsInfo({
             selectedTabId={selectedTab ?? filteredTabs?.[0]?.id}
             onSelect={onSelectTab}
             tabs={filteredTabs.map(({Component, ...tab} = {}) => ({
-                title: <DetailInfoFieldLabel field={tab} />,
+                title: <span {...(getTabCyData(tab) ? { 'data-ms-id': getTabCyData(tab) } : {})}><DetailInfoFieldLabel field={tab} /></span>,
                 eventKey: tab?.id,
-                component: <Component fields={tab?.items} {...props} />
+                component: <div data-ms-id="dataset-view-sidepanel-tab-content"><Component fields={tab?.items} {...props} /></div>
             }))}
         />
     );
diff --git a/web/client/plugins/ResourcesCatalog/components/MenuItem.jsx b/web/client/plugins/ResourcesCatalog/components/MenuItem.jsx
index 8a950a0778e..c7e00867b9d 100644
--- a/web/client/plugins/ResourcesCatalog/components/MenuItem.jsx
+++ b/web/client/plugins/ResourcesCatalog/components/MenuItem.jsx
@@ -30,11 +30,21 @@ const DropdownMenuItems = ({
         {items
             .map((itm, idx) => {
                 if (itm.Component) {
-                    return (<itm.Component key={idx} variant="default" className={itm.className} showMessage />);
+                    return (
+                        <itm.Component
+                            key={idx}
+                            variant="default"
+                            className={itm.className}
+                            showMessage
+                            dataMsId={itm.dataMsId}
+                            {...(itm.dataMsId ? { 'data-ms-id': itm.dataMsId } : {})}
+                        />
+                    );
                 }
                 if (itm.type === 'divider') {
                     return <RBMenuItem key={idx} divider />;
                 }
+                const menuItemAttributes = itm.menuItemAttributes || {};
                 const labelNode = itm.labelId ? <Message msgId={itm.labelId} /> : itm.label;
                 return (
                     <React.Fragment key={idx}>
@@ -44,6 +54,7 @@ const DropdownMenuItems = ({
                             as={itm?.items ? 'span' : 'a' }
                             target={itm.target ?? target}
                             className={itm.className}
+                            {...menuItemAttributes}
                         >
                             {itm.glyph ? <Glyphicon glyph={itm.glyph} /> : null}
                             {itm.glyph && labelNode ? ' ' : null}
@@ -115,13 +126,22 @@ const MenuItem = ({
         iconType,
         square,
         tooltipId,
-        src
+        src,
+        toggleAttributes,
+        menuItemAttributes,
+        dataMsId
     } = item || {};
 
     const target = itemTarget ?? defaultTarget;
 
     if (Component) {
-        return <Component variant={variant} size={size} className={className} component={menuItemComponent}/>;
+        return <Component
+            variant={variant}
+            size={size}
+            className={className}
+            component={menuItemComponent}
+            dataMsId={dataMsId}
+        />;
     }
 
     const labelNode = labelId ? <Message msgId={labelId} /> : label;
@@ -140,6 +160,7 @@ const MenuItem = ({
                     style={style}
                     bsSize={size}
                     noCaret={noCaret}
+                    {...toggleAttributes}
                 >
                     {src
                         ? <img src={src} />
@@ -164,7 +185,7 @@ const MenuItem = ({
 
     if (type === 'link') {
         return (<li>
-            <MenuNavLink href={href} target={target}>
+            <MenuNavLink href={href} target={target} {...(menuItemAttributes || {})}>
                 {glyph ? <Glyphicon glyph={glyph} type={iconType}/> : null}
                 {glyph && labelNode ? ' ' : null}
                 {labelNode}
@@ -194,6 +215,8 @@ const MenuItem = ({
                 href={href}
                 target={target}
                 borderTransparent
+                dataMsId={dataMsId}
+                {...(menuItemAttributes || {})}
             >
                 {glyph ? <Glyphicon glyph={glyph} /> : null}
                 {glyph && labelNode ? ' ' : null}
diff --git a/web/client/plugins/ResourcesCatalog/components/ResourceCard.jsx b/web/client/plugins/ResourcesCatalog/components/ResourceCard.jsx
index f8f3d2639a9..482203522c3 100644
--- a/web/client/plugins/ResourcesCatalog/components/ResourceCard.jsx
+++ b/web/client/plugins/ResourcesCatalog/components/ResourceCard.jsx
@@ -34,8 +34,14 @@ const ResourceCardButton = ({
     variant,
     borderTransparent,
     loading,
+    cardMsIdPrefix,
+    dataMsId,
     ...props
 }) => {
+    const resolvedDataMsId = dataMsId
+        || (cardMsIdPrefix && ['heart', 'heart-o'].includes(glyph) ? `${cardMsIdPrefix}-btn-favorite` : null)
+        || (cardMsIdPrefix && glyph === 'details' ? `${cardMsIdPrefix}-properties` : null);
+
     function handleOnClick(event) {
         event.stopPropagation();
         if (onClick) {
@@ -48,6 +54,7 @@ const ResourceCardButton = ({
             square={square}
             borderTransparent={borderTransparent}
             {...props}
+            {...resolvedDataMsId ? { 'data-ms-id': resolvedDataMsId } : {}}
             tooltipId={square && labelId ? labelId : null}
             onClick={handleOnClick}
         >
@@ -74,6 +81,7 @@ const ResourceCardWrapper = ({
     layoutCardsStyle,
     query,
     target,
+    cardMsIdPrefix,
     ...props
 }) => {
     const showViewerLink = !!(!readOnly && viewerUrl);
@@ -104,6 +112,7 @@ const ResourceCardWrapper = ({
                 <a
                     className="_absolute _fill"
                     href={viewerUrl}
+                    {...cardMsIdPrefix ? { 'data-ms-id': `${cardMsIdPrefix}-link` } : {}}
                     {...target && {target}}
                 />
             ) : null}
@@ -234,7 +243,8 @@ const ResourceCardGridBody = ({
     options,
     thumbnailUrl,
     hideThumbnail,
-    target
+    target,
+    cardMsIdPrefix
 }) => {
 
     const headerEntry = metadata.find(entry => entry.target === 'header');
@@ -254,7 +264,11 @@ const ResourceCardGridBody = ({
             >
                 <FlexBox className="ms-resource-card-body-header" gap="sm" centerChildrenVertically>
                     <FlexBox.Fill flexBox>
-                        <Text fontSize="md" ellipsis={!headerEntry.showFullContent}>
+                        <Text
+                            fontSize="md"
+                            ellipsis={!headerEntry.showFullContent}
+                            {...cardMsIdPrefix ? { 'data-ms-id': `${cardMsIdPrefix}-title` } : {}}
+                        >
                             {((icon || headerEntry?.icon) && !loading) && (
                                 <><Glyphicon {...(icon || headerEntry?.icon)} />{' '}</>
                             )}
@@ -304,6 +318,7 @@ const ResourceCardGridBody = ({
                                     resource={resource}
                                     viewerUrl={viewerUrl}
                                     component={ResourceCardButton}
+                                    cardMsIdPrefix={cardMsIdPrefix}
                                     readOnly={readOnly}
                                     target={target}
                                 />
@@ -318,6 +333,7 @@ const ResourceCardGridBody = ({
                         resource={resource}
                         viewerUrl={viewerUrl}
                         options={options}
+                        cardMsIdPrefix={cardMsIdPrefix}
                         readOnly={readOnly}
                         target={target}
                         className="_absolute _margin-sm _corner-tr"
@@ -340,7 +356,8 @@ const ResourceCardListBody = ({
     options: optionsProp,
     buttons,
     columns,
-    target
+    target,
+    cardMsIdPrefix
 }) => {
     const options = [
         ...(buttons || []),
@@ -379,6 +396,7 @@ const ResourceCardListBody = ({
                             resource={resource}
                             viewerUrl={viewerUrl}
                             options={options}
+                            cardMsIdPrefix={cardMsIdPrefix}
                             readOnly={readOnly}
                             target={target}
                         />
@@ -411,7 +429,8 @@ const ResourceCard = forwardRef(({
     formatHref,
     onClick,
     hideThumbnail,
-    target
+    target,
+    cardIndex
 }, ref) => {
 
     const resource = data;
@@ -420,6 +439,7 @@ const ResourceCard = forwardRef(({
         viewerUrl,
         thumbnailUrl
     } = getResourceInfo(resource);
+    const cardMsIdPrefix = cardIndex !== undefined ? `dataset-card-${cardIndex}` : undefined;
 
     const CardComponent = component || ResourceCardWrapper;
     const CardBody = cardBody[layoutCardsStyle];
@@ -437,6 +457,7 @@ const ResourceCard = forwardRef(({
             columns={columns}
             metadata={metadata}
             query={query}
+            cardMsIdPrefix={cardMsIdPrefix}
             target={target}
         >
             {CardBody ? <CardBody
@@ -454,6 +475,7 @@ const ResourceCard = forwardRef(({
                 columns={columns}
                 thumbnailUrl={thumbnailUrl}
                 hideThumbnail={hideThumbnail}
+                cardMsIdPrefix={cardMsIdPrefix}
                 target={target}
             /> : null}
         </CardComponent>
diff --git a/web/client/plugins/ResourcesCatalog/components/ResourceCardActionButtons.jsx b/web/client/plugins/ResourcesCatalog/components/ResourceCardActionButtons.jsx
index 28421dacc47..f7f86db0e30 100644
--- a/web/client/plugins/ResourcesCatalog/components/ResourceCardActionButtons.jsx
+++ b/web/client/plugins/ResourcesCatalog/components/ResourceCardActionButtons.jsx
@@ -16,10 +16,18 @@ const ActionMenuItem = ({
     iconType,
     children,
     labelId,
+    cardMsIdPrefix,
+    dataMsId,
     ...props
 }) => {
+    const resolvedDataMsId = dataMsId
+        || (cardMsIdPrefix && glyph === 'duplicate' ? `${cardMsIdPrefix}-actions-clone` : null)
+        || (cardMsIdPrefix && glyph === 'trash' ? `${cardMsIdPrefix}-actions-delete` : null);
     return (
-        <MenuItem {...props}>
+        <MenuItem
+            {...props}
+            {...resolvedDataMsId ? { 'data-ms-id': resolvedDataMsId } : {}}
+        >
             {glyph ? <><Glyphicon glyph={glyph}/>{' '}</> : null}
             {labelId ? <Message msgId={labelId} /> : null}
         </MenuItem>
@@ -32,6 +40,7 @@ function ResourceCardActionButtons({
     resource,
     className,
     target,
+    cardMsIdPrefix,
     ...props
 }) {
 
@@ -59,6 +68,7 @@ function ResourceCardActionButtons({
                     size="xs"
                     noCaret
                     className="_border-transparent"
+                    {...cardMsIdPrefix ? { 'data-ms-id': `${cardMsIdPrefix}-actions` } : {}}
                 >
                     <Glyphicon glyph="option-vertical" />
                 </Dropdown.Toggle>
@@ -66,7 +76,7 @@ function ResourceCardActionButtons({
                     {options.map((option) => {
                         if (option.Component) {
                             const { Component } = option;
-                            return <Component key={option.name} resource={resource} viewerUrl={viewerUrl} renderType="menuItem" target={target} component={ActionMenuItem}/>;
+                            return <Component key={option.name} resource={resource} viewerUrl={viewerUrl} renderType="menuItem" target={target} component={ActionMenuItem} cardMsIdPrefix={cardMsIdPrefix} />;
                         }
                         return null;
                     })}
diff --git a/web/client/plugins/ResourcesCatalog/components/ResourceStatus.jsx b/web/client/plugins/ResourcesCatalog/components/ResourceStatus.jsx
index c85d6dac68e..0538cd09274 100644
--- a/web/client/plugins/ResourcesCatalog/components/ResourceStatus.jsx
+++ b/web/client/plugins/ResourcesCatalog/components/ResourceStatus.jsx
@@ -38,7 +38,7 @@ const ResourceStatus = ({ statusItems = [] }) => {
                 }
                 if (item.type === 'icon') {
                     return (
-                        <Text key={idx} fontSize="sm" className={item.variant ? `ms-${item.variant}-text` : ''} >
+                        <Text key={idx} fontSize="sm" className={`${item.variant ? `ms-${item.variant}-text` : ''} ${item.className || ''}`} {...(item['data-ms-id'] ? {'data-ms-id': item['data-ms-id']} : {})}>
                             <IconWithTooltip
                                 glyph={item.glyph}
                                 tooltip={item.tooltip}
diff --git a/web/client/plugins/ResourcesCatalog/components/ResourcesContainer.jsx b/web/client/plugins/ResourcesCatalog/components/ResourcesContainer.jsx
index c889e277445..3552e69c991 100644
--- a/web/client/plugins/ResourcesCatalog/components/ResourcesContainer.jsx
+++ b/web/client/plugins/ResourcesCatalog/components/ResourcesContainer.jsx
@@ -64,8 +64,10 @@ const ResourcesContainer = (props) => {
                         return (
                             <li
                                 key={`${idx}:${resource?.id}`}
+                                data-ms-id={`dataset-card-${idx}`}
                             >
                                 <ResourceCard
+                                    cardIndex={idx}
                                     component={cardComponent}
                                     active={isCardActive(resource)}
                                     data={resource}
diff --git a/web/client/plugins/SidebarMenu.jsx b/web/client/plugins/SidebarMenu.jsx
index 9c5c63d63a7..c80bbea255b 100644
--- a/web/client/plugins/SidebarMenu.jsx
+++ b/web/client/plugins/SidebarMenu.jsx
@@ -266,18 +266,28 @@ class SidebarMenu extends React.Component {
         return this.state.hidden ? false : (
             <div id="mapstore-sidebar-menu-container" className={`shadow-soft ${this.props.isSidebarFullHeight ? "fullHeightSideBar" : ""}`} style={this.getStyle(this.props.style)}>
                 <ContainerDimensions>
-                    { ({ height }) =>
-                        <ToolsContainer id={this.props.id}
-                            className={this.props.className}
-                            container={(props) => <>{props.children}</>}
-                            toolStyle="tray"
-                            activeStyle="primary"
-                            stateSelector="sidebarMenu"
-                            tool={SidebarElement}
-                            tools={this.getTools('sidebar', height)}
-                            panels={this.getPanels(this.props.items)}
-                            toolComponent={SidebarMenuItem}
-                        /> }
+                    { ({ height }) => {
+                        const tools = this.getTools('sidebar', height).map((tool, index) => ({
+                            ...tool,
+                            cfg: {
+                                ...(tool.cfg || {}),
+                                'data-ms-id': (tool.cfg && tool.cfg['data-ms-id']) || (tool.name ? `sidebar-btn-${tool.name}` : `tooltip-btn-${index}`)
+                            }
+                        }));
+                        return (
+                            <ToolsContainer id={this.props.id}
+                                className={this.props.className}
+                                container={(props) => <>{props.children}</>}
+                                toolStyle="tray"
+                                activeStyle="primary"
+                                stateSelector="sidebarMenu"
+                                tool={SidebarElement}
+                                tools={tools}
+                                panels={this.getPanels(this.props.items)}
+                                toolComponent={SidebarMenuItem}
+                            />
+                        );
+                    } }
                 </ContainerDimensions>
             </div>
 
diff --git a/web/client/plugins/print/ActionButton.jsx b/web/client/plugins/print/ActionButton.jsx
index 70253352f4e..3246b8db0f5 100644
--- a/web/client/plugins/print/ActionButton.jsx
+++ b/web/client/plugins/print/ActionButton.jsx
@@ -11,7 +11,7 @@ export const ActionButton = (props) => {
     const icon = glyph ? <Glyphicon glyph={glyph}/> : <span/>;
     const enable = !!handleExpression({}, {...props}, "{" + enabled + "}");
     return (
-        <Button className={className} disabled={!enable} {...buttonConfig} style={{marginTop: "10px", marginRight: "5px"}} onClick={actions[action]}>
+        <Button data-ms-id="btn-print" className={className} disabled={!enable} {...buttonConfig} style={{marginTop: "10px", marginRight: "5px"}} onClick={actions[action]}>
             {loading ? <Spinner spinnerName="circle" overrideSpinnerClassName="spinner" noFadeIn /> : icon} <Message msgId={text}/>
         </Button>
     );
diff --git a/web/client/plugins/print/TextInput.jsx b/web/client/plugins/print/TextInput.jsx
index e2facf03c55..65955f59cf9 100644
--- a/web/client/plugins/print/TextInput.jsx
+++ b/web/client/plugins/print/TextInput.jsx
@@ -25,7 +25,7 @@ export const TextInput = ({spec, property, label, placeholder, actions, onChange
     return (
         <FormGroup>
             {label && <ControlLabel>{getMessageById(context.messages, label)}</ControlLabel> || null}
-            <FormControl {...getType(type)} value={get(spec, fullProperty)} placeholder={placeholder && getMessageById(context.messages, placeholder)}
+            <FormControl {...getType(type)} data-ms-id={`print-form-${label}`} value={get(spec, fullProperty)} placeholder={placeholder && getMessageById(context.messages, placeholder)}
                 onChange={(e) => onChangeParameter(fullProperty, e.target.value)} disabled={disabled}/>
         </FormGroup>
     );