Upgrade puppeteer (#7438)

Upgrade puppeteer to the latest

samples/e2eTestUtils/jest-puppeteer-utils/jestSetup.js

@@ -59,7 +59,7 @@ module.exports = async (jestOptions) => {
     if(jestOptions.projects && jestOptions.projects.length > 0) {
         const servers = [];
         jestOptions.projects.forEach((project) => {
-            const jestConfig = require(path.resolve(project, "jest.config.js"));
+            const jestConfig = require(path.resolve(project, "jest.config.cjs"));
             servers.push(startServer(jestConfig));
         });
 
@@ -68,7 +68,7 @@ module.exports = async (jestOptions) => {
             process.exit(1);
         });
     } else {
-        const jestConfig = require(path.resolve(jestOptions.rootDir, "jest.config.js"));
+        const jestConfig = require(path.resolve(jestOptions.rootDir, "jest.config.cjs"));
         await startServer(jestConfig).catch(async () => {
             await serverUtils.killServers(jestOptions);
             process.exit(1)

samples/e2eTestUtils/jest-puppeteer-utils/serverUtils.js

@@ -130,14 +130,14 @@ async function killServers(jestOptions) {
     if (jestOptions.projects && jestOptions.projects.length > 0) {
         for (let i = 0; i < jestOptions.projects.length; i++) {
             const project = jestOptions.projects[i];
-            const jestConfig = require(path.resolve(project, "jest.config.js"));
+            const jestConfig = require(path.resolve(project, "jest.config.cjs"));
             const port = jestConfig.globals.__PORT__;
             await killServer(port);
         }
     } else {
         const jestConfig = require(path.resolve(
             jestOptions.rootDir,
-            "jest.config.js"
+            "jest.config.cjs"
         ));
         await killServer(jestConfig.globals.__PORT__);
     }

samples/e2eTestUtils/package.json

@@ -17,6 +17,6 @@
     "peerDependencies": {
         "jest": "^29.5.0",
         "playwright-core": "^1.31.1",
-        "puppeteer": "^20.9.0"
+        "puppeteer": "^24.1.0"
     }
 }

samples/e2eTestUtils/src/TestUtils.ts

@@ -529,11 +529,14 @@ export async function clickLoginPopup(
     await page.click("#SignIn");
     await screenshot.takeScreenshot(page, "signInClicked");
     // Click Sign In With Popup
-    const newPopupWindowPromise = new Promise<Page>((resolve) =>
+    const newPopupWindowPromise = new Promise<Page|null>((resolve) =>
         page.once("popup", resolve)
     );
     await page.click("#popup");
     const popupPage = await newPopupWindowPromise;
+    if (!popupPage) {
+        throw new Error('Popup window was not opened');
+      }
     const popupWindowClosed = new Promise<void>((resolve) =>
         popupPage.once("close", resolve)
     );
@@ -548,11 +551,14 @@ export async function clickLogoutPopup(
     await page.click("#SignIn");
     await screenshot.takeScreenshot(page, "signOutClicked");
     // Click Sign Out With Popup
-    const newPopupWindowPromise = new Promise<Page>((resolve) =>
+    const newPopupWindowPromise = new Promise<Page|null>((resolve) =>
         page.once("popup", resolve)
     );
     await page.click("#popup");
     const popupPage = await newPopupWindowPromise;
+    if (!popupPage) {
+        throw new Error('Popup window was not opened');
+      }
     const popupWindowClosed = new Promise<void>((resolve) =>
         popupPage.once("close", resolve)
     );

samples/msal-angular-v3-samples/angular-b2c-sample-app/src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
 import { MsalService, MsalBroadcastService, MSAL_GUARD_CONFIG, MsalGuardConfiguration } from '@azure/msal-angular';
-import { AuthenticationResult, InteractionStatus, PopupRequest, RedirectRequest, EventMessage, EventType, InteractionType, AccountInfo, SsoSilentRequest, IdTokenClaims, PromptValue } from '@azure/msal-browser';
+import { AuthenticationResult, InteractionStatus, PopupRequest, RedirectRequest, EventMessage, EventType, InteractionType, AccountInfo, IdTokenClaims, PromptValue } from '@azure/msal-browser';
 import { Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
 
@@ -87,13 +87,15 @@ export class AppComponent implements OnInit, OnDestroy {
                                     || (account.idTokenClaims as IdTokenClaimsWithPolicyId).tfp === environment.b2cPolicies.names.signUpSignIn)
                             );
 
-                    let signUpSignInFlowRequest: SsoSilentRequest = {
+                    let signUpSignInFlowRequest: PopupRequest = {
+                        scopes: [...environment.apiConfig.scopes],
                         authority: environment.b2cPolicies.authorities.signUpSignIn.authority,
-                        account: originalSignInAccount
+                        account: originalSignInAccount,
+                        prompt: PromptValue.NONE
                     };
 
-                    // silently login again with the signUpSignIn policy
-                    this.authService.ssoSilent(signUpSignInFlowRequest);
+                    // To get the updated account information
+                    this.authService.acquireTokenPopup(signUpSignInFlowRequest);
                 }
 
                 /**

samples/msal-angular-v3-samples/angular-b2c-sample-app/src/app/home/home.component.ts

@@ -18,10 +18,12 @@ export class HomeComponent implements OnInit {
   ngOnInit(): void {
     this.msalBroadcastService.msalSubject$
       .pipe(
-        filter((msg: EventMessage) => msg.eventType === EventType.LOGIN_SUCCESS),
+        filter((msg: EventMessage) => msg.eventType === EventType.LOGIN_SUCCESS || msg.eventType === EventType.ACQUIRE_TOKEN_SUCCESS),
       )
       .subscribe((result: EventMessage) => {
         console.log(result);
+        this.setLoginDisplay();
+        this.getClaims((result.payload as AuthenticationResult).account?.idTokenClaims as Record<string, any>);
       });
 
     this.msalBroadcastService.inProgress$
@@ -40,6 +42,7 @@ export class HomeComponent implements OnInit {
   }
 
   getClaims(claims: Record<string, any>) {
+    this.dataSource = [];
     if (claims) {
       Object.entries(claims).forEach((claim: [string, unknown], index: number) => {
         this.dataSource.push({id: index, claim: claim[0], value: claim[1]});

samples/msal-angular-v3-samples/angular-b2c-sample-app/test/local-account.spec.ts

@@ -41,7 +41,7 @@ describe('B2C user-flow tests (local account)', () => {
   });
 
   beforeEach(async () => {
-    context = await browser.createIncognitoBrowserContext();
+    context = await browser.createBrowserContext();
     page = await context.newPage();
     page.setDefaultTimeout(5000);
     BrowserCache = new BrowserCacheUtils(page, 'localStorage');
@@ -77,8 +77,8 @@ describe('B2C user-flow tests (local account)', () => {
     );
 
     // Verify UI now displays logged in content
-    await page.waitForXPath("//p[contains(., 'Login successful!')]");
-    await page.waitForXPath("//button[contains(., 'Logout')]");
+    await page.waitForSelector("xpath/.//p[contains(., 'Login successful!')]");
+    await page.waitForSelector("xpath/.//button[contains(., 'Logout')]");
 
     await screenshot.takeScreenshot(page, 'Signed in with the policy');
 
@@ -113,9 +113,8 @@ describe('B2C user-flow tests (local account)', () => {
       `window.location.href.startsWith("http://localhost:${port}")`
     );
     await page.waitForSelector('#idTokenClaims');
-    const htmlBody = await page.evaluate(() => document.body.innerHTML);
-    expect(htmlBody).toContain(`${displayName}`);
-    expect(htmlBody).toContain('B2C_1_SISOPolicy'); // implies the current active account
+    await page.waitForSelector(`xpath=//td[contains(., ${displayName})]`);
+    await page.waitForSelector(`xpath=//td[contains(., 'B2C_1_SISOPolicy')]`); // implies the current active account
 
     // Verify tokens are in cache
     const tokenStoreAfterEdit = await BrowserCache.getTokens();

samples/msal-angular-v3-samples/angular-b2c-sample-app/test/msa-account.spec.ts

@@ -45,7 +45,7 @@ describe('B2C user-flow tests (msa account)', () => {
   });
 
   beforeEach(async () => {
-    context = await browser.createIncognitoBrowserContext();
+    context = await browser.createBrowserContext();
     page = await context.newPage();
     page.setDefaultTimeout(5000);
     BrowserCache = new BrowserCacheUtils(page, 'localStorage');
@@ -76,8 +76,8 @@ describe('B2C user-flow tests (msa account)', () => {
     await b2cMsaAccountEnterCredentials(page, screenshot, username, accountPwd);
 
     // Verify UI now displays logged in content
-    await page.waitForXPath("//p[contains(., 'Login successful!')]");
-    await page.waitForXPath("//button[contains(., 'Logout')]");
+    await page.waitForSelector("xpath/.//p[contains(., 'Login successful!')]");
+    await page.waitForSelector("xpath/.//button[contains(., 'Logout')]");
 
     await screenshot.takeScreenshot(page, 'Signed in with the policy');
 
@@ -112,9 +112,8 @@ describe('B2C user-flow tests (msa account)', () => {
       `window.location.href.startsWith("http://localhost:${port}")`
     );
     await page.waitForSelector('#idTokenClaims');
-    const htmlBody = await page.evaluate(() => document.body.innerHTML);
-    expect(htmlBody).toContain(`${displayName}`);
-    expect(htmlBody).toContain('B2C_1_SISOPolicy'); // implies the current active account
+    await page.waitForSelector(`xpath=//td[contains(., ${displayName})]`);
+    await page.waitForSelector(`xpath=//td[contains(., 'B2C_1_SISOPolicy')]`); // implies the current active account
 
     // Verify tokens are in cache
     const tokenStoreAfterEdit = await BrowserCache.getTokens();

samples/msal-angular-v3-samples/angular-standalone-sample/test/home.spec.ts

@@ -41,7 +41,7 @@ describe('/ (Home Page)', () => {
   });
 
   beforeEach(async () => {
-    context = await browser.createIncognitoBrowserContext();
+    context = await browser.createBrowserContext();
     page = await context.newPage();
     page.setDefaultTimeout(5000);
     BrowserCache = new BrowserCacheUtils(page, 'localStorage');
@@ -79,16 +79,16 @@ describe('/ (Home Page)', () => {
     await enterCredentials(page, screenshot, username, accountPwd);
 
     // Verify UI now displays logged in content
-    await page.waitForXPath("//p[contains(., 'Login successful!')]");
+    await page.waitForSelector("xpath/.//p[contains(., 'Login successful!')]");
     const logoutButton = await page.waitForSelector(
       "xpath=//button[contains(., 'Logout')]"
     );
     if (logoutButton) {
       await logoutButton.click();
     }
-    await page.waitForXPath("//button[contains(., 'Logout using')]");
-    const logoutButtons = await page.$x(
-      "//button[contains(., 'Logout using')]"
+    await page.waitForSelector("xpath/.//button[contains(., 'Logout using')]");
+    const logoutButtons = await page.$$(
+      "xpath/.//button[contains(., 'Logout using')]"
     );
     expect(logoutButtons.length).toBe(2);
     if (logoutButton) {
@@ -111,7 +111,7 @@ describe('/ (Home Page)', () => {
     await screenshot.takeScreenshot(page, 'Profile page loaded');
 
     // Verify displays profile page without activating MsalGuard
-    await page.waitForXPath("//strong[contains(., 'First Name: ')]");
+    await page.waitForSelector("xpath/.//strong[contains(., 'First Name: ')]");
   });
 
   it('Home page - children are rendered after logging in with loginPopup', async (): Promise<void> => {
@@ -130,35 +130,38 @@ describe('/ (Home Page)', () => {
     const loginPopupButton = await page.waitForSelector(
       "xpath=//button[contains(., 'Login using Popup')]"
     );
-    const newPopupWindowPromise = new Promise<puppeteer.Page>((resolve) =>
+    const newPopupWindowPromise = new Promise<puppeteer.Page|null>((resolve) =>
       page.once('popup', resolve)
     );
     if (loginPopupButton) {
       await loginPopupButton.click();
     }
     const popupPage = await newPopupWindowPromise;
+    if (!popupPage) {
+      throw new Error('Popup window was not opened');
+    }
     const popupWindowClosed = new Promise<void>((resolve) =>
       popupPage.once('close', resolve)
     );
 
     await enterCredentials(popupPage, screenshot, username, accountPwd);
     await popupWindowClosed;
 
-    await page.waitForXPath("//p[contains(., 'Login successful!')]", {
+    await page.waitForSelector("xpath/.//p[contains(., 'Login successful!')]", {
       timeout: 3000,
     });
     await screenshot.takeScreenshot(page, 'Popup closed');
 
     // Verify UI now displays logged in content
-    await page.waitForXPath("//p[contains(., 'Login successful!')]");
+    await page.waitForSelector("xpath/.//p[contains(., 'Login successful!')]");
     const logoutButton = await page.waitForSelector(
       "xpath=//button[contains(., 'Logout')]"
     );
     if (logoutButton) {
       await logoutButton.click();
     }
-    const logoutButtons = await page.$x(
-      "//button[contains(., 'Logout using')]"
+    const logoutButtons = await page.$$(
+      "xpath/.//button[contains(., 'Logout using')]"
     );
     expect(logoutButtons.length).toBe(2);
     if (logoutButton) {
@@ -181,6 +184,6 @@ describe('/ (Home Page)', () => {
     await screenshot.takeScreenshot(page, 'Profile page loaded');
 
     // Verify displays profile page without activating MsalGuard
-    await page.waitForXPath("//strong[contains(., 'First Name: ')]");
+    await page.waitForSelector("xpath/.//strong[contains(., 'First Name: ')]");
   });
 });

samples/msal-angular-v3-samples/angular-standalone-sample/test/profile.spec.ts

@@ -41,7 +41,7 @@ describe('/ (Profile Page)', () => {
   });
 
   beforeEach(async () => {
-    context = await browser.createIncognitoBrowserContext();
+    context = await browser.createBrowserContext();
     page = await context.newPage();
     page.setDefaultTimeout(5000);
     BrowserCache = new BrowserCacheUtils(page, 'localStorage');
@@ -72,7 +72,7 @@ describe('/ (Profile Page)', () => {
     await enterCredentials(page, screenshot, username, accountPwd);
 
     // Verify UI now displays logged in content
-    await page.waitForXPath("//button[contains(., 'Logout')]");
+    await page.waitForSelector("xpath/.//button[contains(., 'Logout')]");
     await screenshot.takeScreenshot(page, 'Profile page signed in');
 
     // Verify tokens are in cache
@@ -81,7 +81,7 @@ describe('/ (Profile Page)', () => {
     });
 
     // Verify displays profile page without activating MsalGuard
-    await page.waitForXPath("//strong[contains(., 'First Name: ')]");
+    await page.waitForSelector("xpath/.//strong[contains(., 'First Name: ')]");
   });
 
   it('Profile page - children are rendered after initial navigation to profile before login ', async () => {
@@ -97,7 +97,7 @@ describe('/ (Profile Page)', () => {
     await enterCredentials(page, screenshot, username, accountPwd);
 
     // Verify UI now displays logged in content
-    await page.waitForXPath("//button[contains(., 'Logout')]");
+    await page.waitForSelector("xpath/.//button[contains(., 'Logout')]");
     await screenshot.takeScreenshot(page, 'Profile page signed in directly');
 
     // Verify tokens are in cache
@@ -106,6 +106,6 @@ describe('/ (Profile Page)', () => {
     });
 
     // Verify displays profile page without activating MsalGuard
-    await page.waitForXPath("//strong[contains(., 'First Name: ')]");
+    await page.waitForSelector("xpath/.//strong[contains(., 'First Name: ')]");
   });
 });