[Identity] Two Playwright tests for the InteractiveBrowserCredential #21171
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| { | ||
| "compilerOptions": { | ||
| "target": "ESNext", | ||
| "module": "commonjs", | ||
| "moduleResolution": "Node", | ||
| "sourceMap": true, | ||
| "outDir": "./dist-playwright" | ||
| }, | ||
| "include": ["test/playwright"] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import resolve from "@rollup/plugin-node-resolve"; | ||
| import cjs from "@rollup/plugin-commonjs"; | ||
| import json from "@rollup/plugin-json"; | ||
| import typescript from "@rollup/plugin-typescript"; | ||
| import shim from "rollup-plugin-shim"; | ||
|
|
||
| export default { | ||
| input: "./test/playwright/rollup/src/index.ts", | ||
| output: { | ||
| file: "test/playwright/rollup/dist/index.js", | ||
| format: "umd", | ||
| name: "main", | ||
| }, | ||
| plugins: [ | ||
| shim({}), | ||
| resolve({ | ||
| preferBuiltins: false, | ||
| mainFields: ["module", "browser"], | ||
| }), | ||
| cjs(), | ||
| json(), | ||
| typescript(), | ||
| ], | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,10 @@ | ||||||||||
| <!DOCTYPE html> | ||||||||||
| <html> | ||||||||||
| <head> | ||||||||||
| <meta charset="utf-8" /> | ||||||||||
| <!-- /index.js is a route defined in the Express.js server --> | ||||||||||
|
There was a problem hiding this comment.
Suggested change
Suggested change
|
||||||||||
| <script src="/index.js"></script> | ||||||||||
| </head> | ||||||||||
| <body> | ||||||||||
| </body> | ||||||||||
| </html> | ||||||||||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| // Copyright (c) Microsoft Corporation. | ||
| // Licensed under the MIT license. | ||
|
|
||
| import { Page } from "@playwright/test"; | ||
|
|
||
| export async function preparePage(page: Page): Promise<void> { | ||
| // Log and continue all network requests | ||
| await page.route("**", (route) => { | ||
| console.log("PLAYWRIGHT PAGE ROUTE:", route.request().url()); | ||
| route.continue(); | ||
| }); | ||
|
|
||
| // Logging the page's console.logs | ||
| page.on("console", async (msg) => { | ||
| const values = []; | ||
| for (const arg of msg.args()) { | ||
| values.push(await arg.jsonValue()); | ||
| } | ||
| console.log(...values); | ||
| }); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| // Copyright (c) Microsoft Corporation. | ||
| // Licensed under the MIT license. | ||
|
|
||
| import * as dotenv from "dotenv"; | ||
| import { test, expect } from "@playwright/test"; | ||
| import { isLiveMode } from "@azure-tools/test-recorder"; | ||
| import { prepareServer } from "./server"; | ||
| import { preparePage } from "./page"; | ||
|
|
||
| dotenv.config(); | ||
|
|
||
| const clientId = process.env.AZURE_CLIENT_ID || process.env.AZURE_IDENTITY_BROWSER_CLIENT_ID; | ||
| const azureUsername = process.env.AZURE_USERNAME || process.env.AZURE_IDENTITY_TEST_USERNAME; | ||
| const azurePassword = process.env.AZURE_PASSWORD || process.env.AZURE_IDENTITY_TEST_PASSWORD; | ||
| const port = process.env.PORT || "8080"; | ||
| const scope = "https://graph.microsoft.com/.default"; | ||
|
|
||
| // The Azure Active Directory app registration should be of the type | ||
| // "spa" and the redirect endpoint should point to: | ||
| const homeUri = `http://localhost:${port}/`; | ||
|
|
||
| const credentialOptions = { redirectUri: homeUri }; | ||
|
|
||
| test("Authenticates with a popup", async ({ page }) => { | ||
| test.skip(!isLiveMode(), "Playwright tests can only run on live mode"); | ||
| test.skip(!clientId, "Client ID environment variable required"); | ||
| test.skip(!azureUsername, "Username environment variable required"); | ||
| test.skip(!azurePassword, "Password environment variable required"); | ||
|
|
||
| const { start, stop } = await prepareServer({ port }); | ||
| await preparePage(page); | ||
| await start(); | ||
|
|
||
| // THE TEST BEGINS | ||
|
|
||
| // We go to the home page | ||
| await page.goto(homeUri); | ||
|
|
||
| const [popup] = await Promise.all([ | ||
| page.waitForEvent("popup"), | ||
| page.evaluate( | ||
| async ({ clientId, scope, credentialOptions }) => { | ||
| const { InteractiveBrowserCredential } = (window as any).main; | ||
|
|
||
| const credential = new InteractiveBrowserCredential({ | ||
| ...credentialOptions, | ||
| clientId, | ||
| }); | ||
|
|
||
| // The redirection to Azure happens here... | ||
| credential.getToken(scope); | ||
| }, | ||
| { | ||
| clientId, | ||
| scope, | ||
| credentialOptions, | ||
| } | ||
| ), | ||
| ]); | ||
|
|
||
| // Interactive popup login with Playwright | ||
| await popup.waitForNavigation(); | ||
| await popup.waitForSelector(`input[type="email"]`); | ||
| await popup.fill(`input[type="email"]`, azureUsername!); | ||
| await popup.waitForSelector(`input[type="submit"]`); | ||
| await popup.click(`input[type="submit"]`); | ||
| await popup.waitForLoadState("networkidle"); | ||
| await popup.waitForSelector(`input[type="password"]`); | ||
| await popup.fill(`input[type="password"]`, azurePassword!); | ||
| await popup.waitForSelector(`input[type="submit"]`); | ||
| await popup.click(`input[type="submit"]`); | ||
| await popup.waitForSelector(`input[type="submit"]`); | ||
| await popup.click(`input[type="submit"]`); | ||
| await popup.waitForEvent("close"); | ||
|
|
||
| const token = await page.evaluate( | ||
| async ({ clientId, scope, credentialOptions }) => { | ||
| const { InteractiveBrowserCredential } = (window as any).main; | ||
|
|
||
| const credential = new InteractiveBrowserCredential({ | ||
| clientId, | ||
| ...credentialOptions, | ||
| }); | ||
|
|
||
| return await credential.getToken(scope); | ||
| }, | ||
| { clientId, scope, credentialOptions } | ||
| ); | ||
|
|
||
| expect(token).toBeTruthy(); | ||
| expect(token.token).toBeTruthy(); | ||
| expect(token.expiresOnTimestamp).toBeTruthy(); | ||
|
|
||
| await stop(); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| // Copyright (c) Microsoft Corporation. | ||
| // Licensed under the MIT license. | ||
|
|
||
| import * as dotenv from "dotenv"; | ||
| import { test, expect } from "@playwright/test"; | ||
| import { isLiveMode } from "@azure-tools/test-recorder"; | ||
| import { prepareServer } from "./server"; | ||
| import { preparePage } from "./page"; | ||
|
|
||
| dotenv.config(); | ||
|
|
||
| const clientId = process.env.AZURE_CLIENT_ID || process.env.AZURE_IDENTITY_BROWSER_CLIENT_ID; | ||
| const azureUsername = process.env.AZURE_USERNAME || process.env.AZURE_IDENTITY_TEST_USERNAME; | ||
| const azurePassword = process.env.AZURE_PASSWORD || process.env.AZURE_IDENTITY_TEST_PASSWORD; | ||
| const port = process.env.PORT || "8080"; | ||
| const scope = "https://graph.microsoft.com/.default"; | ||
|
|
||
| // The Azure Active Directory app registration should be of the type | ||
| // "spa" and the redirect endpoint should point to: | ||
| const homeUri = `http://localhost:${port}/`; | ||
|
|
||
| const credentialOptions = { redirectUri: homeUri }; | ||
|
|
||
| test("Authenticates", async ({ page }) => { | ||
| test.skip(!isLiveMode(), "Playwright tests can only run on live mode"); | ||
| test.skip(!clientId, "Client ID environment variable required"); | ||
| test.skip(!azureUsername, "Username environment variable required"); | ||
| test.skip(!azurePassword, "Password environment variable required"); | ||
|
|
||
| const { start, stop } = await prepareServer({ port }); | ||
| await preparePage(page); | ||
| await start(); | ||
|
|
||
| // THE TEST BEGINS | ||
|
|
||
| // We go to the home page | ||
| await page.goto(homeUri); | ||
|
|
||
| await page.evaluate( | ||
| async ({ clientId, scope, credentialOptions }) => { | ||
| const { InteractiveBrowserCredential } = (window as any).main; | ||
|
|
||
| const credential = new InteractiveBrowserCredential({ | ||
| ...credentialOptions, | ||
| clientId, | ||
| loginStyle: "redirect", | ||
| }); | ||
|
|
||
| // The redirection to Azure happens here... | ||
| credential.getToken(scope); | ||
| }, | ||
| { clientId, scope, credentialOptions } | ||
| ); | ||
|
|
||
| // Interactive login with Playwright | ||
| await page.waitForNavigation(); | ||
| await page.waitForSelector(`input[type="email"]`); | ||
| await page.fill(`input[type="email"]`, azureUsername!); | ||
| await page.waitForSelector(`input[type="submit"]`); | ||
| await page.click(`input[type="submit"]`); | ||
| await page.waitForLoadState("networkidle"); | ||
| await page.waitForSelector(`input[type="password"]`); | ||
| await page.fill(`input[type="password"]`, azurePassword!); | ||
| await page.waitForSelector(`input[type="submit"]`); | ||
| await page.click(`input[type="submit"]`); | ||
| await page.waitForSelector(`input[type="submit"]`); | ||
| await page.click(`input[type="submit"]`); | ||
| await page.waitForURL(`${homeUri}**`); | ||
|
|
||
| const token = await page.evaluate( | ||
| async ({ clientId, scope, credentialOptions }) => { | ||
| const { InteractiveBrowserCredential } = (window as any).main; | ||
|
|
||
| const credential = new InteractiveBrowserCredential({ | ||
| ...credentialOptions, | ||
| clientId, | ||
| loginStyle: "redirect", | ||
| }); | ||
|
|
||
| return await credential.getToken(scope); | ||
| }, | ||
| { clientId, scope, credentialOptions } | ||
| ); | ||
|
|
||
| expect(token).toBeTruthy(); | ||
| expect(token.token).toBeTruthy(); | ||
| expect(token.expiresOnTimestamp).toBeTruthy(); | ||
|
|
||
| await stop(); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| // Copyright (c) Microsoft Corporation. | ||
| // Licensed under the MIT license. | ||
|
|
||
| export { InteractiveBrowserCredential } from "../../../../src/credentials/interactiveBrowserCredential.browser"; | ||
|
There was a problem hiding this comment. If I were to do this in another project, other than our SDK repo, I would load here the export { InteractiveBrowserCredential } from "@azure/identity"; |
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| // Copyright (c) Microsoft Corporation. | ||
| // Licensed under the MIT license. | ||
|
|
||
| import * as express from "express"; | ||
| import { readFileSync } from "fs"; | ||
| import { Server } from "http"; | ||
|
|
||
| // A simple web server that allows passing configuration and behavioral parameters. | ||
| // This file should be thought as the archetypicall representation of a web server, | ||
| // whereas the test file will include the nuance specific to testing the desired behavior. | ||
|
|
||
| /** | ||
| * Options to the server. | ||
| * With the intent to make the server parametrizable! | ||
| */ | ||
| export interface ServerOptions { | ||
| /** | ||
| * Port number as a string | ||
| */ | ||
| port: string; | ||
| } | ||
|
|
||
| /** | ||
| * Result of the prepareServer function. | ||
| */ | ||
| export interface PepareServerResult { | ||
| app: express.Application; | ||
| start: () => Promise<void>; | ||
| stop: () => Promise<void>; | ||
| } | ||
|
|
||
| /** | ||
| * Sets up a parametrizable Express server. | ||
| */ | ||
| export async function prepareServer(serverOptions: ServerOptions): Promise<PepareServerResult> { | ||
| const app = express(); | ||
|
|
||
| /** | ||
| * Logging calls. | ||
| */ | ||
| app.use((req: express.Request, _res: express.Response, next: express.NextFunction) => { | ||
| console.log("Playwright Express test server:", req.url); | ||
| next(); | ||
| }); | ||
|
|
||
| /** | ||
| * Endpoint that loads the index.js | ||
| */ | ||
| app.get("/index.js", async (_req: express.Request, res: express.Response) => { | ||
| const indexContent = readFileSync("./test/playwright/rollup/dist/index.js", { | ||
| encoding: "utf8", | ||
| }); | ||
| res.send(indexContent); | ||
| }); | ||
|
|
||
| /** | ||
| * Home URI | ||
| */ | ||
| app.get("/", async (_req: express.Request, res: express.Response) => { | ||
| const indexContent = readFileSync("./test/playwright/index.html", { encoding: "utf8" }); | ||
| res.send(indexContent); | ||
| }); | ||
|
|
||
| let server: Server | undefined = undefined; | ||
|
|
||
| return { | ||
| app, | ||
| async start() { | ||
| server = app.listen(serverOptions.port, () => { | ||
| console.log(`Authorization code redirect server listening on port ${serverOptions.port}`); | ||
| }); | ||
| }, | ||
| async stop() { | ||
| if (server) { | ||
| server.close(); | ||
| } | ||
| }, | ||
| }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
npx playwright installensures that the web browser needed for testing is installed. Playwright doesn’t do that by default when you install it.