test updates to address fxa and some other minor fixes

e2e-tests/e2eTestUtils/helpers.ts

@@ -45,7 +45,7 @@ const enterConfirmationCode = async (page: Page) => {
   try {        
     const maybeVerificationCodeInput = '//div[@class="card"]//input'
     await page.waitForSelector(maybeVerificationCodeInput, { timeout: 2000 })
-    const confirmButton = page.locator('button:has-text("Confirm")')
+    const confirmButton = page.locator('#submit-btn')
     const verificationCode = await getVerificationCode(process.env.E2E_TEST_ACCOUNT_FREE as string, page)
     await page.locator(maybeVerificationCodeInput).fill(verificationCode)
     await confirmButton.click()
@@ -54,33 +54,29 @@ const enterConfirmationCode = async (page: Page) => {
 }
 
 const signIn = async (page: Page) => {
-  try {
-    const signInButton = page.locator('#use-logged-in')
-    await Promise.all([
-      page.waitForNavigation(),
-      signInButton.click()
-    ]);
-    await checkAuthState(page)
-  } catch {}
+  const signInButton = '//*[@id="use-logged-in"]'
+  await page.waitForSelector(signInButton, { timeout: 2000 })
+  // await page.locator('//*[@id="use-logged-in"]').click({ force: true })
+  await page.locator(signInButton).click({force: true})
+  await page.waitForTimeout(500)
+  await checkAuthState(page)
 }
 
 const enterYourEmail = async (page: Page) => {
-  try {    
-    const maybeEmailInput = 'input[name="email"]'
-    await page.waitForSelector(maybeEmailInput, { timeout: 2000 })
-    const signInButton = page.locator('#submit-btn')
-    await page.locator(maybeEmailInput).fill(process.env.E2E_TEST_ACCOUNT_FREE as string)
-    await signInButton.click()
-    await checkAuthState(page)
-  } catch {}
+  const maybeEmailInput = 'input[name="email"]'
+  await page.waitForSelector(maybeEmailInput, { timeout: 2000 })
+  const signInButton = page.locator('#submit-btn')
+  await page.locator(maybeEmailInput).fill(process.env.E2E_TEST_ACCOUNT_FREE as string)
+  await signInButton.click()
+  await page.waitForTimeout(500)
+  await checkAuthState(page)
 }
 
 const enterYourPassword = async (page: Page) => {
-  try {    
-    await page.locator('#password').fill(process.env.E2E_TEST_ACCOUNT_PASSWORD as string)
-    await page.locator('#submit-btn').click()
-    await checkAuthState(page)
-  } catch {}
+  await page.locator('#password').fill(process.env.E2E_TEST_ACCOUNT_PASSWORD as string)
+  await page.locator('#submit-btn').click()
+  await page.waitForTimeout(500)
+  await checkAuthState(page)
 }
 
 export const generateRandomEmail = async () => {  
@@ -127,7 +123,7 @@ export const defaultScreenshotOpts: Partial<DefaultScreenshotOpts> = {
 
 export const checkAuthState = async (page: Page) => {
   try {    
-    const authStateTitleString = await page.locator('h1').textContent({ timeout: 1000 })  
+    const authStateTitleString = await page.locator('h1').textContent({ timeout: 2000 })  
     const checkIfTitleConatins = (potentialTitle: string) => {
       return authStateTitleString?.includes(potentialTitle)
     }

e2e-tests/pages/dashboardPage.ts

@@ -21,6 +21,7 @@ export class DashboardPage {
     readonly relayExtensionBanner: Locator
     readonly dashBoardWithoutMasks: Locator
     readonly dashBoardWithoutMasksEmail: Locator
+    readonly generateNewMaskButton: Locator
     readonly emailsForwardedAmount: Locator
     readonly emailsBlockedAmount: Locator
     readonly emailMasksUsedAmount: Locator
@@ -67,6 +68,7 @@ export class DashboardPage {
         this.emailsForwardedAmount = page.locator('(//dd[starts-with(@class, "profile_value")])[3]')
         this.emailsBlockedAmount = page.locator('(//dd[starts-with(@class, "profile_value")])[2]')
         this.emailMasksUsedAmount = page.locator('(//dd[starts-with(@class, "profile_value")])[1]')        
+        this.generateNewMaskButton = page.locator('button:has-text("Generate new mask")')
         this.maxMaskLimitButton = page.locator('//div[starts-with(@class, "AliasList_controls")]//a[starts-with(@class, "Button_button")]')
         this.bottomUgradeBanner = page.locator('//div[starts-with(@class, "profile_bottom-banner-wrapper")]')
         this.relayExtensionBanner = page.locator('//section[starts-with(@class, "profile_banners-wrapper")]/div')
@@ -97,16 +99,13 @@ export class DashboardPage {
     }
 
     async generateMask(numberOfMasks = 1){
-        const generateNewMaskButtonString = 'button:has-text("Generate new mask")'
-        await this.page.waitForSelector(generateNewMaskButtonString, { timeout: 5000 })
-
         // check if max number of masks have been created
         if(numberOfMasks === 0){
             return
         }
            
         // generate a new mask and confirm
-        await this.page.locator(generateNewMaskButtonString).click()
+        await this.generateNewMaskButton.click()
         await this.page.waitForSelector(this.maskCard, { timeout: 3000 })
         
         // randomize between 1.5-2.5 secs between each generate to deal with issue of multiple quick clicks
@@ -146,38 +145,36 @@ export class DashboardPage {
         }
 
         // if clear all, check if there's an expanded mask card
-        if(clearAll){                        
+        if(clearAll){
             try {                
-                await this.page.waitForSelector(this.maskCard, { timeout: 3000 })
+                await this.page.waitForSelector(this.maskCard, { timeout: 3000 })                
                 numberOfMasks = await this.page.locator(this.maskCard).count()
             } catch (error) {
                 console.error('There are no masks to delete')
+                return
             }
             
             try {
-                isExpanded = await this.maskCardExpanded.isVisible()                            
-            } catch (error) {
-                console.error('There are no expanded')
-            }
+                isExpanded = await this.maskCardExpanded.isVisible()
+            } catch {}
         }        
         
-        // locate mask expand button only if mask is not already expanded
-        if(!isExpanded){
+        // locate mask expand button only if mask is not already expanded        
+        if(numberOfMasks && !isExpanded){
             try {
                 const anchorLocator = `(//div[starts-with(@class, "Alias_expand-toggle")])[${numberOfMasks}]/button`
                 await this.page.waitForSelector(anchorLocator, { timeout: 3000 })
                 await this.page.locator(anchorLocator).click()
-            } catch(err){
-                console.error('No current mask(s) to delete')
-                return
-            }
+            } catch {}
         }
         
-        // delete flow
-        const currentMaskCardDeleteButton = this.page.locator(`(//button[starts-with(@class, "AliasDeletionButton_deletion")])[${numberOfMasks}]`)
-        await currentMaskCardDeleteButton.click()
-        await this.maskCardDeleteConfirmationCheckbox.click()
-        await this.maskCardFinalDeleteButton.click()
+        // delete flow        
+        if(numberOfMasks){
+            const currentMaskCardDeleteButton = this.page.locator(`(//button[starts-with(@class, "AliasDeletionButton_deletion")])[${numberOfMasks}]`)
+            await currentMaskCardDeleteButton.click()
+            await this.maskCardDeleteConfirmationCheckbox.click()
+            await this.maskCardFinalDeleteButton.click()            
+        }        
 
         // wait for 500 ms and run flow again with the next masks
         await this.page.waitForTimeout(500)

package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/mozilla/fx-private-relay/issues"
   },
   "devDependencies": {
-    "@playwright/test": "^1.25.0",
+    "@playwright/test": "1.24.0",
     "allure-playwright": "^2.0.0-beta.19",
     "dotenv": "^16.0.1"
   },