Playwright
The home page says it all: Playwright enables reliable end-to-end testing for modern web apps.
As explained in the SWA-CLI post, I installed the required Playwright package as a development dependency for the project:
npm i -D @playwright/test
An example test is included with the install, so running Playwright will result in a passing test staight out of the box.
Writing Tests
I removed the default example test and created my own test file, navigationTests.js, with my first suite of tests. However, Playwright did not find my new tests.
C:\Paul\MySWA [release ≡ +2 ~2 -0 !]> npx playwright test
Running 0 tests using 0 workers
=================
no tests found.
=================
The file name I used did not follow the default Playwright convention, and there was no testMatch config setting that matched the file name I used. “You need to rename the filename to the first.test.js or add the testMatch property in the configuration file.” https://stackoverflow.com/a/69326177/641165
I wanted to only run my tests in Microsoft’s Edge browser: https://learn.microsoft.com/en-us/microsoft-edge/playwright/#run-tests-in-microsoft-edge
Testing when using SWA-CLI Authentication
For AAD authentication in SWA-CLI, use “type” action, as the fill action results in a mock client principal that is missing the userDetails property.
//await page.fill('#userDetails', "paul_logan@myswa.com");
await page.locator('#userDetails').type("paul_logan@myswa.com");
Test was moving too fast, passed when I ran it in debug mode, but needed the following (userDetails issue above may have been due to this, as the input is called userDetails): var userNameInput = page.locator('#userDetails'); await userNameInput.focus(); await userNameInput.press(‘Backspace’, { delay: 200 }); await userNameInput.type(“paul_logan@myswa.com”);
https://playwright.dev/docs/next/input#type-characters
https://dev.to/kouts/getting-started-with-playwright-e2e-testing-mfd
https://learn.microsoft.com/en-us/azure/static-web-apps/local-development#authorization-and-authentication-emulation
How to point tests to live site URL in build pipeline
Base URL as and environment variable Azure pipeline cannot connect to localhost website
Read from env fille using: https://www.npmjs.com/package/dotenv npm install dotenv –save(??) Cannot find module ‘dotenv’ or its corresponding type declarations Restart your VS Code
Secret values to be used by Playwright
The Configuration section for the SWA in Azure allows you to add variables - these are only for the backend/function API of your SWA. They cannot be read by Playwright and are not available in the process.env set of variables.
I wanted to add a user name and password to authenticate with AAD as part of the E2E testing in my release pipeline. The credentials needed to be kept out of version control, in secret variables
Azure Devops => Pipelines => Click the more details icon and select Edit against the pipeline. You will be shown the YAML editor, select the release branch from the branch dropdown. Click the Variables button => New Variable button