fix(e2e): reduce test flakiness (#50072)

* fix: visit page before each test

* fix: ensure editor is visible when checking contents

* fix: click after clear

cypress.config.js

@@ -24,8 +24,7 @@ module.exports = defineConfig({
     // Temporary disable these until we can address the flakiness
     excludeSpecPattern: [
       'cypress/e2e/**/challenge-hot-keys.ts',
-      'cypress/e2e/**/multifile.ts',
-      'cypress/e2e/**/multifile-cert-project.ts'
+      'cypress/e2e/**/multifile.ts'
     ],
 
     setupNodeEvents(on, config) {

cypress/e2e/default/learn/challenges/multifile-cert-project.ts

@@ -2,6 +2,7 @@ const save1text = 'save 1';
 const save2text = 'save 2';
 
 const editorElements = {
+  container: '.vertical .reflex-container',
   editor: '.react-monaco-editor-container',
   saveCodeBtn: '[data-cy="save-code-to-database-btn"]',
   closeFlash: '.close'
@@ -11,23 +12,28 @@ describe('multifileCertProjects', function () {
   before(() => {
     cy.exec('pnpm run seed');
     cy.login();
+  });
+
+  beforeEach(() => {
+    cy.preserveSession();
     cy.visit(
       'learn/responsive-web-design/responsive-web-design-projects/build-a-tribute-page'
     );
   });
 
-  beforeEach(() => {
-    cy.preserveSession();
-  });
-
   it('should save and reload user code', function () {
     // save to database (savedChallenges) when clicking save code button
-    cy.get(editorElements.editor).click().focused().clear().type(save1text);
+    cy.get(editorElements.container).find(editorElements.editor).click();
+    // Firefox somehow can lose focus after the .clear()
+    cy.focused().clear().click().type(save1text);
+    cy.get(editorElements.editor).contains(save1text);
     cy.get(editorElements.saveCodeBtn).click();
     cy.contains('Your code was saved to the database.');
     // load saved code on a hard refresh
     cy.reload();
-    cy.contains(save1text);
+    cy.get(editorElements.container)
+      .find(editorElements.editor)
+      .contains(save1text);
   });
 
   it('should save using ctrl+s hotkey and persist through navigation', function () {
@@ -36,21 +42,22 @@ describe('multifileCertProjects', function () {
     cy.exec('pnpm run seed');
     // and the redux store:
     cy.reload();
-    cy.get(editorElements.editor)
-      .click()
-      .focused()
-      .clear()
-      .type(`${save2text}{ctrl+s}`);
+    cy.get(editorElements.container).find(editorElements.editor).click();
+    cy.focused().clear().click().type(`${save2text}{ctrl+s}`);
+    cy.get(editorElements.editor).contains(save2text);
     cy.contains('Your code was saved to the database.');
     cy.get(editorElements.closeFlash).click();
     // load saved code when navigating site (no hard refresh)'
     cy.contains('Responsive Web Design Projects').click();
     cy.contains('In this Responsive Web Design Certification');
     cy.contains('Build a Tribute Page').click();
-    cy.contains(save2text);
+    cy.get(editorElements.container)
+      .find(editorElements.editor)
+      .contains(save2text);
     // trigger the warning about saving too quickly
     cy.reload();
-    cy.get(editorElements.editor)
+    cy.get(editorElements.container)
+      .find(editorElements.editor)
       .click()
       .focused()
       .type(`{ctrl+s}`)