data/authors/Paul Logan.json

PWA SWA 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.”

I wanted to only run my tests in Microsoft’s Edge browser:

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', "");
  await page.locator('#userDetails').type("");

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‘Backspace’, { delay: 200 }); await userNameInput.type(“”);

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: 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