Use data attributes to reference settings in e2e tests (#7820)

These rows on the Advanced Settings page were being looked up in the
e2e tests by the order they appeared in. Instead they're now referenced
by data id, so that we can add new settings and re-arrange them without
breaking the e2e tests.

test/e2e/metamask-ui.spec.js

@@ -414,13 +414,13 @@ describe('MetaMask', function () {
       await advancedTab.click()
       await driver.delay(regularDelayMs)
 
-      const showConversionToggle = await driver.findElement(By.css('.settings-page__content-row:nth-of-type(6) .settings-page__content-item-col > div > div'))
+      const showConversionToggle = await driver.findElement(By.css('[data-testid="advanced-setting-show-testnet-conversion"] .settings-page__content-item-col > div > div'))
       await showConversionToggle.click()
 
       const advancedGasTitle = await driver.findElement(By.xpath(`//span[contains(text(), 'Advanced gas controls')]`))
       await driver.scrollToElement(advancedGasTitle)
 
-      const advancedGasToggle = await driver.findElement(By.css('.settings-page__content-row:nth-of-type(4) .settings-page__content-item-col > div > div'))
+      const advancedGasToggle = await driver.findElement(By.css('[data-testid="advanced-setting-advanced-gas-inline"] .settings-page__content-item-col > div > div'))
       await advancedGasToggle.click()
       windowHandles = await driver.getAllWindowHandles()
       extension = windowHandles[0]

test/e2e/threebox.spec.js

@@ -122,8 +122,7 @@ describe('MetaMask', function () {
         const advancedButton = await driver.findElement(By.xpath(`//div[contains(text(), 'Advanced')]`))
         await advancedButton.click()
 
-        const threeBoxToggle = await driver.findElements(By.css('.toggle-button'))
+        const threeBoxToggleButton = await driver.findElement(By.css('[data-testid="advanced-setting-3box"] .toggle-button div'))
-        const threeBoxToggleButton = await threeBoxToggle[4].findElement(By.css('div'))
         await threeBoxToggleButton.click()
       })
 

ui/app/pages/settings/advanced-tab/advanced-tab.component.js

@@ -45,9 +45,9 @@ export default class AdvancedTab extends PureComponent {
   renderMobileSync () {
     const { t } = this.context
     const { history } = this.props
-    //
+
     return (
-      <div className="settings-page__content-row">
+      <div className="settings-page__content-row" data-testid="advanced-setting-mobile-sync">
         <div className="settings-page__content-item">
           <span>{ t('syncWithMobile') }</span>
         </div>
@@ -74,7 +74,7 @@ export default class AdvancedTab extends PureComponent {
     const { displayWarning } = this.props
 
     return (
-      <div className="settings-page__content-row">
+      <div className="settings-page__content-row" data-testid="advanced-setting-state-logs">
         <div className="settings-page__content-item">
           <span>{ t('stateLogs') }</span>
           <span className="settings-page__content-description">
@@ -109,7 +109,7 @@ export default class AdvancedTab extends PureComponent {
     const { showResetAccountConfirmationModal } = this.props
 
     return (
-      <div className="settings-page__content-row">
+      <div className="settings-page__content-row" data-testid="advanced-setting-reset-account">
         <div className="settings-page__content-item">
           <span>{ t('resetAccount') }</span>
           <span className="settings-page__content-description">
@@ -147,7 +147,7 @@ export default class AdvancedTab extends PureComponent {
     const { sendHexData, setHexDataFeatureFlag } = this.props
 
     return (
-      <div className="settings-page__content-row">
+      <div className="settings-page__content-row" data-testid="advanced-setting-hex-data">
         <div className="settings-page__content-item">
           <span>{ t('showHexData') }</span>
           <div className="settings-page__content-description">
@@ -173,7 +173,7 @@ export default class AdvancedTab extends PureComponent {
     const { advancedInlineGas, setAdvancedInlineGasFeatureFlag } = this.props
 
     return (
-      <div className="settings-page__content-row">
+      <div className="settings-page__content-row" data-testid="advanced-setting-advanced-gas-inline">
         <div className="settings-page__content-item">
           <span>{ t('showAdvancedGasInline') }</span>
           <div className="settings-page__content-description">
@@ -202,7 +202,7 @@ export default class AdvancedTab extends PureComponent {
     } = this.props
 
     return (
-      <div className="settings-page__content-row">
+      <div className="settings-page__content-row" data-testid="advanced-setting-show-testnet-conversion">
         <div className="settings-page__content-item">
           <span>{ t('showFiatConversionInTestnets') }</span>
           <div className="settings-page__content-description">
@@ -228,7 +228,7 @@ export default class AdvancedTab extends PureComponent {
     const { useNonceField, setUseNonceField } = this.props
 
     return (
-      <div className="settings-page__content-row">
+      <div className="settings-page__content-row" data-testid="advanced-setting-custom-nonce">
         <div className="settings-page__content-item">
           <span>{ this.context.t('nonceField') }</span>
           <div className="settings-page__content-description">
@@ -276,7 +276,7 @@ export default class AdvancedTab extends PureComponent {
     } = this.props
 
     return (
-      <div className="settings-page__content-row">
+      <div className="settings-page__content-row" data-testid="advanced-setting-auto-logout">
         <div className="settings-page__content-item">
           <span>{ t('autoLogoutTimeLimit') }</span>
           <div className="settings-page__content-description">
@@ -329,7 +329,7 @@ export default class AdvancedTab extends PureComponent {
       description = t('syncWithThreeBoxDisabled')
     }
     return (
-      <div className="settings-page__content-row">
+      <div className="settings-page__content-row" data-testid="advanced-setting-3box">
         <div className="settings-page__content-item">
           <span>{ t('syncWithThreeBox') }</span>
           <div className="settings-page__content-description">
@@ -404,7 +404,7 @@ export default class AdvancedTab extends PureComponent {
     const { ipfsGatewayError } = this.state
 
     return (
-      <div className="settings-page__content-row">
+      <div className="settings-page__content-row" data-testid="advanced-setting-ipfs-gateway">
         <div className="settings-page__content-item">
           <span>{ t('ipfsGateway') }</span>
           <div className="settings-page__content-description">