Update open-addon.js

Author: enuchi

test/utils/open-addon.js

@@ -13,36 +13,69 @@ export const openAddon = async (page) => {
 
   // take screenshot
   await page.screenshot({
-    path: path.join(screenshotDir, `main-spreadsheet-page-${Date.now()}.png`),
+    path: path.join(
+      screenshotDir,
+      `1-main-spreadsheet-before-signin-${Date.now()}.png`
+    ),
   });
   await page.click('a[aria-label="Sign in"]'); // click on signin button
 
   // take screenshot
   await page.screenshot({
-    path: path.join(screenshotDir, `first-signin-page-${Date.now()}.png`),
+    path: path.join(screenshotDir, `2-signin-page-${Date.now()}.png`),
   });
 
   await page.waitForSelector('input[name="identifier"]', { visible: true });
   await page.type('input[name="identifier"]', process.env.EMAIL); // type email
+
+  // take screenshot after entering email
+  await page.screenshot({
+    path: path.join(screenshotDir, `3-email-entered-${Date.now()}.png`),
+  });
+
   await page.click('#identifierNext'); // click "next" button
 
   await page.waitForSelector('input[name="Passwd"]', { visible: true });
   await page.type('input[name="Passwd"]', process.env.PASSWORD); // type pass
+
+  // take screenshot after entering password
+  await page.screenshot({
+    path: path.join(screenshotDir, `4-password-entered-${Date.now()}.png`),
+  });
+
   await page.waitForTimeout(500);
 
   await page.click('#passwordNext'); // click "next" button
   await page.waitForTimeout(3000);
 
+  // take screenshot after login attempt
+  await page.screenshot({
+    path: path.join(screenshotDir, `5-after-login-attempt-${Date.now()}.png`),
+  });
+
   if (
     await page.evaluate(
       () =>
         document.querySelector('h1#headingText') &&
         document.querySelector('h1#headingText').innerText.includes('erify')
     )
   ) {
+    // take screenshot of verification page
+    await page.screenshot({
+      path: path.join(screenshotDir, `6-verification-needed-${Date.now()}.png`),
+    });
+
     try {
       await page.click('li:nth-child(3)');
       await page.waitForTimeout(6000);
+
+      // take screenshot after selecting verification method
+      await page.screenshot({
+        path: path.join(
+          screenshotDir,
+          `7-verification-method-selected-${Date.now()}.png`
+        ),
+      });
     } catch {
       // eslint-disable-next-line no-console
       console.log('The "choose account recovery method" page isn\'t shown');
@@ -52,9 +85,26 @@ export const openAddon = async (page) => {
       'input[name="knowledgePreregisteredEmailResponse"]',
       process.env.TEST_RECOVERY_EMAIL
     ); // type recovery email
+
+    // take screenshot after entering recovery email
+    await page.screenshot({
+      path: path.join(
+        screenshotDir,
+        `8-recovery-email-entered-${Date.now()}.png`
+      ),
+    });
+
     await page.waitForTimeout(6000);
     await page.click('div[data-primary-action-label] button'); // click "next" button
     await page.waitForTimeout(5000);
+
+    // take screenshot after verification completed
+    await page.screenshot({
+      path: path.join(
+        screenshotDir,
+        `9-verification-completed-${Date.now()}.png`
+      ),
+    });
   }
 
   if (
@@ -66,11 +116,27 @@ export const openAddon = async (page) => {
           .innerText.includes('implify your sign')
     )
   ) {
+    // take screenshot of simplify sign-in page
+    await page.screenshot({
+      path: path.join(
+        screenshotDir,
+        `10-simplify-signin-page-${Date.now()}.png`
+      ),
+    });
+
     try {
       await page.click(
         'div[data-secondary-action-label] > div > div:nth-child(2) button'
       );
       await page.waitForTimeout(6000);
+
+      // take screenshot after dismissing simplify sign-in
+      await page.screenshot({
+        path: path.join(
+          screenshotDir,
+          `11-after-dismissing-simplify-signin-${Date.now()}.png`
+        ),
+      });
     } catch {
       // eslint-disable-next-line no-console
       console.log('The "Simplify your sign-in" page isn\'t shown');
@@ -82,6 +148,14 @@ export const openAddon = async (page) => {
     { visible: true }
   );
 
+  // take screenshot before opening addon menu
+  await page.screenshot({
+    path: path.join(
+      screenshotDir,
+      `12-before-opening-addon-menu-${Date.now()}.png`
+    ),
+  });
+
   // open new addon menubar item
   await page.evaluate(() => {
     const addOnMenuButton = document.querySelector(
@@ -98,6 +172,11 @@ export const openAddon = async (page) => {
     { visible: true }
   );
 
+  // take screenshot with addon menu opened
+  await page.screenshot({
+    path: path.join(screenshotDir, `13-addon-menu-opened-${Date.now()}.png`),
+  });
+
   // open "bootstrap" menu item
   await page.evaluate(() => {
     const bootstrapMenuButton = document.querySelector(
@@ -121,5 +200,18 @@ export const openAddon = async (page) => {
     timeout: 10000,
   });
 
+  // take screenshot after clicking bootstrap menu item
+  await page.screenshot({
+    path: path.join(
+      screenshotDir,
+      `14-bootstrap-dialog-opened-${Date.now()}.png`
+    ),
+  });
+
   await page.waitForTimeout(15000);
+
+  // take final screenshot after waiting period
+  await page.screenshot({
+    path: path.join(screenshotDir, `15-addon-fully-loaded-${Date.now()}.png`),
+  });
 };