From d27f2ee7d6406bdd5b850f537627b72f0dc89ef7 Mon Sep 17 00:00:00 2001 From: Mark Stacey Date: Tue, 21 Jan 2020 11:31:56 -0400 Subject: [PATCH] Fix intermittent e2e test failure (#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 | 3 +-- test/e2e/incremental-security.spec.js | 3 +-- test/e2e/metamask-responsive-ui.spec.js | 3 +-- test/e2e/metamask-ui.spec.js | 3 +-- .../confirm-seed-phrase/confirm-seed-phrase.component.js | 2 +- .../confirm-seed-phrase/draggable-seed.component.js | 1 + 6 files changed, 6 insertions(+), 9 deletions(-) diff --git a/test/e2e/address-book.spec.js b/test/e2e/address-book.spec.js index 8b6ef3310..6d41596db 100644 --- a/test/e2e/address-book.spec.js +++ b/test/e2e/address-book.spec.js @@ -98,8 +98,7 @@ 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) } diff --git a/test/e2e/incremental-security.spec.js b/test/e2e/incremental-security.spec.js index 197c94152..3287ca0ae 100644 --- a/test/e2e/incremental-security.spec.js +++ b/test/e2e/incremental-security.spec.js @@ -171,8 +171,7 @@ 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) } diff --git a/test/e2e/metamask-responsive-ui.spec.js b/test/e2e/metamask-responsive-ui.spec.js index b06c11f8e..b57f9bb61 100644 --- a/test/e2e/metamask-responsive-ui.spec.js +++ b/test/e2e/metamask-responsive-ui.spec.js @@ -93,8 +93,7 @@ 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) } diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js index 3433d68ed..09ce14da9 100644 --- a/test/e2e/metamask-ui.spec.js +++ b/test/e2e/metamask-ui.spec.js @@ -95,8 +95,7 @@ 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) } diff --git a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js index 309ece594..8f51e89a3 100644 --- a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js +++ b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js @@ -163,7 +163,7 @@ export default class ConfirmSeedPhrase extends PureComponent { { this.renderPendingSeeds() } { this.renderSelectedSeeds() } -
+
{ shuffledSeedWords.map((word, index) => { const isSelected = selectedSeedIndices.includes(index) diff --git a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/draggable-seed.component.js b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/draggable-seed.component.js index 7a23738ff..7293e6098 100644 --- a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/draggable-seed.component.js +++ b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/draggable-seed.component.js @@ -58,6 +58,7 @@ class DraggableSeed extends Component { 'confirm-seed-phrase__seed-word--drop-hover': isOver && canDrop, })} onClick={onClick} + data-testid={`draggable-seed-${selected ? 'selected-' : ''}${word}`} > { word }