fix: flaky test `Custom network JSON-RPC API should show warning when…

… adding chainId ` (#25294)

<!--
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**
This PR fixes the flaky test `Custom network JSON-RPC API should show
warning when adding chainId`. The race condition is that whenever we are
in the process of adding a network, if we click `Approve` before the 3
callout warnings have appeared, nothing happens and we remain in the
same popup view. (See video below for visually spotting the race
condition).
This causes that we don't find the next element which is in the new
popup window, which doesn't appear.

`TimeoutError: Waiting for element to be located By(xpath,
//h4[contains(text(), "You are adding a new RPC provider for Ethereum
Mainnet")])`


- Circle ci failure:
https://app.circleci.com/pipelines/github/MetaMask/metamask-extension/87355/workflows/2a67b631-9bc0-4172-b5bd-4005857200f0/jobs/3197142/parallel-runs/4?filterBy=ALL
- Circle ci artifacts: notice how we remained in the first window,
instead of displaying the confirmation modal for adding the network


![image](https://github.com/MetaMask/metamask-extension/assets/54408225/c91720d0-e977-4c0c-86a7-949b1b5e463c)


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

## **Related issues**

Fixes: #24632

## **Manual testing steps**

1. Check ci
2. Run test locally multiple times

## **Screenshots/Recordings**

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


See how the button can appear slightly before the warnings



https://github.com/MetaMask/metamask-extension/assets/54408225/f4c54517-8c70-48a7-ae95-a955fd062905



## **Pre-merge author checklist**

- [ ] 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/tests/network/add-custom-network.spec.js

@@ -165,6 +165,22 @@ describe('Custom network', function () {
             windowHandles,
           );
 
+          // To mitigate a race condition, we wait until the 3 callout warnings appear
+          await driver.waitForSelector({
+            tag: 'span',
+            text: 'According to our record the network name may not correctly match this chain ID.',
+          });
+
+          await driver.waitForSelector({
+            tag: 'span',
+            text: 'According to our records the submitted RPC URL value does not match a known provider for this chain ID.',
+          });
+
+          await driver.waitForSelector({
+            tag: 'a',
+            text: 'verify the network details',
+          });
+
           await driver.clickElement({
             tag: 'button',
             text: 'Approve',