diff --git a/src/components/autocomplete/autocomplete-field.tsx b/src/components/autocomplete/autocomplete-field.tsx
index ea29c443..c004f5e2 100644
--- a/src/components/autocomplete/autocomplete-field.tsx
+++ b/src/components/autocomplete/autocomplete-field.tsx
@@ -24,7 +24,7 @@ export const AutocompleteField = ReactForm.FormField((props: AutocompleteProps &
             renderInput={(inputProps) => (
                 <input
                     {...inputProps}
-                    qe-id={props.qeid}
+                    data-qe-id={props.qeid}
                     onFocus={(e) => {
                         if (inputProps.onFocus) {
                             inputProps.onFocus(e);
diff --git a/src/components/dropdown-menu.tsx b/src/components/dropdown-menu.tsx
index 8e0a7b3e..991ced1d 100644
--- a/src/components/dropdown-menu.tsx
+++ b/src/components/dropdown-menu.tsx
@@ -21,7 +21,7 @@ export class DropDownMenu extends React.PureComponent<DropDownMenuProps> {
         return (
             <DropDown anchor={this.props.anchor} isMenu={true} ref={(dropdown: any) => this.dropdown = dropdown} qeId={this.props.qeId}>
                 <ul>
-                    {this.props.items.map((item, i) => <li qe-id={this.props.qeId + `-` + item.title}
+                    {this.props.items.map((item, i) => <li data-qe-id={this.props.qeId + `-` + item.title}
                         onClick={(event) => this.onItemClick(item, event)} key={i}>
                         {item.iconClassName && <i className={item.iconClassName}/>} {item.title}
                         </li>)}
diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx
index 4f447385..ca1a4bbd 100644
--- a/src/components/dropdown/dropdown.tsx
+++ b/src/components/dropdown/dropdown.tsx
@@ -45,7 +45,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
 
         return (
             <div className='argo-dropdown' ref={(el) => this.el = el}>
-                <div qe-id={this.props.qeId} className='argo-dropdown__anchor' onClick={(event) => { this.open(); event.stopPropagation(); }}>
+                <div data-qe-id={this.props.qeId} className='argo-dropdown__anchor' onClick={(event) => { this.open(); event.stopPropagation(); }}>
                     <this.props.anchor/>
                 </div>
                 {ReactDOM.createPortal((
diff --git a/src/components/popup/popup-manager.spec.tsx b/src/components/popup/popup-manager.spec.tsx
index 427ce5eb..cb0566b0 100644
--- a/src/components/popup/popup-manager.spec.tsx
+++ b/src/components/popup/popup-manager.spec.tsx
@@ -13,8 +13,8 @@ describe('PopupManager', () => {
 
     describe('confirm', () => {
         it.each([
-            ['OK', true, '[qe-id="argo-popup-ok-button"]'],
-            ['Cancel', false, '[qe-id="argo-popup-cancel-button"]'],
+            ['OK', true, '[data-qe-id="argo-popup-ok-button"]'],
+            ['Cancel', false, '[data-qe-id="argo-popup-cancel-button"]'],
         ])('%s', async (_, promiseResult, btnSelector) => {
             const fn = jest.fn<void, [null | PopupProps]>();
             const manager = new PopupManager();
diff --git a/src/components/popup/popup-manager.tsx b/src/components/popup/popup-manager.tsx
index b9dab8c9..b7483a2b 100644
--- a/src/components/popup/popup-manager.tsx
+++ b/src/components/popup/popup-manager.tsx
@@ -41,8 +41,8 @@ export class PopupManager implements PopupApi {
                 content,
                 footer: (
                     <div>
-                        <button qe-id='argo-popup-ok-button' className='argo-button argo-button--base' onClick={() => closeAndResolve(true)}>OK</button> <button
-                            qe-id='argo-popup-cancel-button' className='argo-button argo-button--base-o' onClick={() => closeAndResolve(false)}>Cancel</button>
+                        <button data-qe-id='argo-popup-ok-button' className='argo-button argo-button--base' onClick={() => closeAndResolve(true)}>OK</button>
+                        <button data-qe-id='argo-popup-cancel-button' className='argo-button argo-button--base-o' onClick={() => closeAndResolve(false)}>Cancel</button>
                     </div>
                 ),
             });
@@ -98,8 +98,8 @@ export class PopupManager implements PopupApi {
                 ),
                 footer: (
                     <div>
-                        <button qe-id='prompt-popup-ok-button' className='argo-button argo-button--base' onClick={(e) => formApi.submitForm(e)}>OK</button> <button
-                            qe-id='prompt-popup-cancel-button' className='argo-button argo-button--base-o' onClick={() => closeAndResolve(null)}>Cancel</button>
+                        <button data-qe-id='prompt-popup-ok-button' className='argo-button argo-button--base' onClick={(e) => formApi.submitForm(e)}>OK</button>
+                        <button data-qe-id='prompt-popup-cancel-button' className='argo-button argo-button--base-o' onClick={() => closeAndResolve(null)}>Cancel</button>
                     </div>
                 ),
             });
diff --git a/src/components/top-bar/top-bar.tsx b/src/components/top-bar/top-bar.tsx
index 6f9def32..7b6ea56d 100644
--- a/src/components/top-bar/top-bar.tsx
+++ b/src/components/top-bar/top-bar.tsx
@@ -88,7 +88,7 @@ const renderBreadcrumbs = (breadcrumbs: { title: string | React.ReactNode, path?
 const renderActionMenu = (actionMenu: ActionMenu) => (
     <div>
         {actionMenu.items.map((item, i) => (
-            <button disabled={!!item.disabled} qe-id={item.qeId} className='argo-button argo-button--base' onClick={() => item.action()} style={{marginRight: 2}} key={i}>
+            <button disabled={!!item.disabled} data-qe-id={item.qeId} className='argo-button argo-button--base' onClick={() => item.action()} style={{marginRight: 2}} key={i}>
                 {item.iconClassName && (<i className={item.iconClassName} style={{marginLeft: '-5px', marginRight: '5px'}}/>)}
                 {item.title}
             </button>