fix: flaky test vault-decryption due to autodetect NFT and tokens o…

…verlaying modals (#25466)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
The problem is that there is a new announcement modal that appears on
top of the autodetect tokens. Both announcements need to be closed
before proceeding with the test.



![image](https://github.com/MetaMask/metamask-extension/assets/54408225/cc2920de-638f-4bc5-af05-b426af8f44a8)

An issue has also been opened in order to address this on the MM side
[here](#25465).

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/25466?quickstart=1)

## **Related issues**

Fixes:

## **Manual testing steps**

The ci run is here
https://app.circleci.com/pipelines/github/MetaMask/metamask-extension/88631/workflows/722e50e3-0dbd-4a56-b691-508dd818b3d2/jobs/3264868

![Screenshot from 2024-06-21
16-27-12](https://github.com/MetaMask/metamask-extension/assets/54408225/a14effa4-3808-401a-86b5-ca85df9606d7)


## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->


https://github.com/MetaMask/metamask-extension/assets/54408225/9f8d85e8-c139-4d6a-b3c4-16b7e9fba2a5



- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

test/e2e/vault-decryption-chrome.spec.js

@@ -58,10 +58,17 @@ async function closePopoverIfPresent(driver) {
   await driver.clickElementSafe(popoverButtonSelector);
   await driver.clickElementSafe(enableButtonSelector);
 
+  // NFT Autodetection Independent Announcement
+  const nftAutodetection = {
+    css: '[data-testid="auto-detect-nft-modal"] button',
+    text: 'Not right now',
+  };
+  await driver.clickElementSafe(nftAutodetection);
+
   // Token Autodetection Independent Announcement
   const tokenAutodetection = {
+    css: '[data-testid="auto-detect-token-modal"] button',
     text: 'Not right now',
-    tag: 'button',
   };
   await driver.clickElementSafe(tokenAutodetection);
 }

ui/components/app/auto-detect-nft/auto-detect-nft-modal.tsx

@@ -68,6 +68,7 @@ function AutoDetectNftModal({ isOpen, onClose }: AutoDetectNftModalProps) {
       isClosedOnOutsideClick={false}
       isClosedOnEscapeKey={false}
       className="mm-modal__custom-scrollbar auto-detect-in-modal"
+      data-testid="auto-detect-nft-modal"
       autoFocus={false}
     >
       <ModalOverlay />

ui/components/app/auto-detect-token/auto-detect-token-modal.tsx

@@ -74,6 +74,7 @@ function AutoDetectTokenModal({
       isClosedOnOutsideClick={false}
       isClosedOnEscapeKey={false}
       className="mm-modal__custom-scrollbar auto-detect-in-modal"
+      data-testid="auto-detect-token-modal"
       autoFocus={false}
     >
       <ModalOverlay />