Playwright-example

Repository to demonstrate a few simple sample playwright tests

INSTALLATION

Execute the following commands in the terminal to prepare the initial setup:

node install@latest
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
npm install playwright@latest
or
npm install @playwright/test@latest --save-dev
npx playwright tests

---

Visual Studio Code Extensions:

• EsLint
• Github Theme
• Playwright Test for Visual Studio Code
• Prettier - Code Formatter

---

BROWSERS

Ensure all browsers are installed by default. If you see there's one missing, execute the following command:

npx playwright install

playwright.config.ts is the project section where you find all the browsers used. Configure browsers according to requirements for cross-browser testing.

This is one of the limitations with Playwright. You will only be able to test with the browser versions bundled with the Playwright release you are using. The Playwright team works to support the latest browser versions for each release.

---

SCRIPTS

package.json contains scripts that simplify the running process. Use it to customize easy test runs and for running tests in different environments:

"scripts": {
    "test:local": "BASE_URL=http://localhost:4200, npx playwright test && npx playwright show-report"
}

---

RUN

Following commands can be useful to run test cases via the terminal:

• To run test cases in headed mode (opening browser window):

npx playwright test --headed

• Headless run:

npx playwright test

• Run projects:

npx playwright test --project chromium

• Run all tests within a single file:

npx playwright test tests/login.spec.ts

• Run only the test specified in line 10:

npx playwright test test/example.spec.ts:10

• Tagging test on top to specify which one to run:

test("get started link", { tag: "@first" }, async ({ page }) => {}
npx playwright test --grep first

• Run all tests except the selected one:

npx playwright test --grep-invert

• Running using a script defined in the config file:

npm run test:local

---

DEBUG

Go to the testing icon in your Visual Studio Code and hover over the test you want to debug. Visualize the play symbol within the bug. Mark a breaking point in your code so that the debugger knows where to stop.

In the report, click on the trace viewer to see what happened during the run.

Key F5 shortcut to run test:ui script. The opened screen shows a timeline and screenshots, and also the before and after actions executed.

Use Playwright Inspector when running the test:

npx playwright test --debug

---

PSEUDO CODE GENERATED

npx playwright codegen

*Adjust if required for more resiliency.

---

LOCATORS

Examples of locators:

• page.getByRole('')
• page.getByText()
• page.getByLabel()

Configure data-test attribute by adding it in playwright.config.ts:

export default defineConfig({
  use: {
    testIdAttribute: 'data-test'
  }
});

Having configured the above, you can use:

page.getByTestId()

Example:

await page.getByTestId('nav-sign-in').click()

Other ways to use legacy locators:

page.locator()
await page.locator('[data-test="nav-sign-in"]').click()
page.locator('css=button').click()
await page.locator('button:has-text("Log in"), button:has-text("Sign in")').click()
await page.locator('xpath=//button').click()

---

ASSERTIONS

There are two types of assertions:

• Locator assertions: Automatic retry until it either passes or reaches the timeout.
• Value assertions: Evaluated one time and either pass or fail (implicit wait).

Example by locator:

await expect(locator).toBeVisible()

Example value assertion:

expect(value).toContain()
expect(value).toBe()

---

REFERENCES

• playwright.dev/docs
• GitHub Practice Software Testing