Fix intermittent e2e test failure (MetaMask#7873)

The 'can retype the seed phrase' test would fail sometimes when one of
the words in the seed phrase was a subset of another word (e.g. 'issue'
and 'tissue'). This is because the selector used to find the word
looked for the first element that contained the text, rather than an
exact match.

To simplify the selector and make it more reliable, test ids were added
to each seed phrase word. The selector now uses CSS instead of XPath,
and it only finds exact matches.

A test id was also added to the div containing the shuffled seed words
to select from, so that the chosen seed words wouldn't be selected
in place of the real target when the same word appears twice.

test/e2e/address-book.spec.js

@@ -116,8 +116,11 @@ describe('MetaMask', function () {
     })
 
     async function clickWordAndWait (word) {
-      const xpath = `//div[contains(@class, 'confirm-seed-phrase__seed-word--shuffled') and not(contains(@class, 'confirm-seed-phrase__seed-word--selected')) and contains(text(), '${word}')]`
-      await driver.clickElement(By.xpath(xpath))
+      await driver.clickElement(
+        By.css(
+          `[data-testid="seed-phrase-shuffled"] [data-testid="draggable-seed-${word}"]`
+        )
+      )
       await driver.delay(tinyDelayMs)
     }
 

test/e2e/incremental-security.spec.js

@@ -198,8 +198,11 @@ describe('MetaMask', function () {
     })
 
     async function clickWordAndWait (word) {
-      const xpath = `//div[contains(@class, 'confirm-seed-phrase__seed-word--shuffled') and not(contains(@class, 'confirm-seed-phrase__seed-word--selected')) and contains(text(), '${word}')]`
-      await driver.clickElement(By.xpath(xpath))
+      await driver.clickElement(
+        By.css(
+          `[data-testid="seed-phrase-shuffled"] [data-testid="draggable-seed-${word}"]`
+        )
+      )
       await driver.delay(tinyDelayMs)
     }
 

test/e2e/metamask-responsive-ui.spec.js

@@ -110,8 +110,11 @@ describe('MetaMask', function () {
     })
 
     async function clickWordAndWait (word) {
-      const xpath = `//div[contains(@class, 'confirm-seed-phrase__seed-word--shuffled') and not(contains(@class, 'confirm-seed-phrase__seed-word--selected')) and contains(text(), '${word}')]`
-      await driver.clickElement(By.xpath(xpath))
+      await driver.clickElement(
+        By.css(
+          `[data-testid="seed-phrase-shuffled"] [data-testid="draggable-seed-${word}"]`
+        )
+      )
       await driver.delay(tinyDelayMs)
     }
 

test/e2e/metamask-ui.spec.js

@@ -120,8 +120,11 @@ describe('MetaMask', function () {
     })
 
     async function clickWordAndWait (word) {
-      const xpath = `//div[contains(@class, 'confirm-seed-phrase__seed-word--shuffled') and not(contains(@class, 'confirm-seed-phrase__seed-word--selected')) and contains(text(), '${word}')]`
-      await driver.clickElement(By.xpath(xpath))
+      await driver.clickElement(
+        By.css(
+          `[data-testid="seed-phrase-shuffled"] [data-testid="draggable-seed-${word}"]`
+        )
+      )
       await driver.delay(tinyDelayMs)
     }
 

ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js

@@ -175,7 +175,10 @@ export default class ConfirmSeedPhrase extends PureComponent {
           {this.renderPendingSeeds()}
           {this.renderSelectedSeeds()}
         </div>
-        <div className="confirm-seed-phrase__shuffled-seed-words">
+        <div
+          className="confirm-seed-phrase__shuffled-seed-words"
+          data-testid="seed-phrase-shuffled"
+        >
           {shuffledSeedWords.map((word, index) => {
             const isSelected = selectedSeedIndices.includes(index)
 

ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/draggable-seed.component.js

@@ -62,6 +62,7 @@ class DraggableSeed extends Component {
             }
           )}
           onClick={onClick}
+          data-testid={`draggable-seed-${selected ? 'selected-' : ''}${word}`}
         >
           {word}
         </div>