diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js
index 5230a9d1c..047865e8a 100644
--- a/test/e2e/metamask-ui.spec.js
+++ b/test/e2e/metamask-ui.spec.js
@@ -577,46 +577,37 @@ describe('MetaMask', function () {
     })
 
     it('navigates the transactions', async () => {
-      let navigateTxButtons = await driver.findElements(By.css('.confirm-page-container-navigation__arrow'))
-      assert.equal(navigateTxButtons.length, 4, 'navigation button present')
-
-      await navigateTxButtons[2].click()
+      await driver.clickElement(By.css('[data-testid="next-page"]'))
       let navigationElement = await driver.findElement(By.css('.confirm-page-container-navigation'))
       let navigationText = await navigationElement.getText()
       assert.equal(navigationText.includes('2'), true, 'changed transaction right')
 
-      navigateTxButtons = await driver.findElements(By.css('.confirm-page-container-navigation__arrow'))
-      await navigateTxButtons[2].click()
+      await driver.clickElement(By.css('[data-testid="next-page"]'))
       navigationElement = await driver.findElement(By.css('.confirm-page-container-navigation'))
       navigationText = await navigationElement.getText()
       assert.equal(navigationText.includes('3'), true, 'changed transaction right')
 
-      navigateTxButtons = await driver.findElements(By.css('.confirm-page-container-navigation__arrow'))
-      await navigateTxButtons[2].click()
+      await driver.clickElement(By.css('[data-testid="next-page"]'))
       navigationElement = await driver.findElement(By.css('.confirm-page-container-navigation'))
       navigationText = await navigationElement.getText()
       assert.equal(navigationText.includes('4'), true, 'changed transaction right')
 
-      navigateTxButtons = await driver.findElements(By.css('.confirm-page-container-navigation__arrow'))
-      await navigateTxButtons[0].click()
+      await driver.clickElement(By.css('[data-testid="first-page"]'))
       navigationElement = await driver.findElement(By.css('.confirm-page-container-navigation'))
       navigationText = await navigationElement.getText()
       assert.equal(navigationText.includes('1'), true, 'navigate to first transaction')
 
-      navigateTxButtons = await driver.findElements(By.css('.confirm-page-container-navigation__arrow'))
-      await navigateTxButtons[3].click()
+      await driver.clickElement(By.css('[data-testid="last-page"]'))
       navigationElement = await driver.findElement(By.css('.confirm-page-container-navigation'))
       navigationText = await navigationElement.getText()
       assert.equal(navigationText.split('4').length, 3, 'navigate to last transaction')
 
-      navigateTxButtons = await driver.findElements(By.css('.confirm-page-container-navigation__arrow'))
-      await navigateTxButtons[1].click()
+      await driver.clickElement(By.css('[data-testid="previous-page"]'))
       navigationElement = await driver.findElement(By.css('.confirm-page-container-navigation'))
       navigationText = await navigationElement.getText()
       assert.equal(navigationText.includes('3'), true, 'changed transaction left')
 
-      navigateTxButtons = await driver.findElements(By.css('.confirm-page-container-navigation__arrow'))
-      await navigateTxButtons[1].click()
+      await driver.clickElement(By.css('[data-testid="previous-page"]'))
       navigationElement = await driver.findElement(By.css('.confirm-page-container-navigation'))
       navigationText = await navigationElement.getText()
       assert.equal(navigationText.includes('2'), true, 'changed transaction left')
diff --git a/ui/app/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js b/ui/app/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js
index dd1fd2da4..a3eaf3255 100755
--- a/ui/app/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js
+++ b/ui/app/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js
@@ -19,12 +19,14 @@ const ConfirmPageContainerNavigation = props => {
       >
         <div
           className="confirm-page-container-navigation__arrow"
+          data-testid="first-page"
           onClick={() => onNextTx(firstTx)}
         >
           <img src="/images/double-arrow.svg" />
         </div>
         <div
           className="confirm-page-container-navigation__arrow"
+          data-testid="previous-page"
           onClick={() => onNextTx(prevTxId)}
         >
           <img src="/images/single-arrow.svg" />
@@ -46,12 +48,14 @@ const ConfirmPageContainerNavigation = props => {
       >
         <div
           className="confirm-page-container-navigation__arrow"
+          data-testid="next-page"
           onClick={() => onNextTx(nextTxId)}
         >
           <img className="confirm-page-container-navigation__imageflip" src="/images/single-arrow.svg" />
         </div>
         <div
           className="confirm-page-container-navigation__arrow"
+          data-testid="last-page"
           onClick={() => onNextTx(lastTx)}
         >
           <img className="confirm-page-container-navigation__imageflip" src="/images/double-arrow.svg" />