Introduction to Playwright

Reading materials

Video materials

Prerequisites

Automating the QA work on a web application

Setting up the development environment

Cloning the repository and setting it up

Starting the servers

Automating the QA work on a web application using Playwright

Naming variables and functions

Naming files and folders

Naming classes

Comments

Destructuring

Single Responsibility Principle

Function arguments

JavaScript conventions

Folder structure

Initializing Playwright

Committing .env files in Git

Environment Variables

Test configuration

Test suite

Test

Conventions for writing a test

Test organization and conventions

Headless mode

Headed mode

UI mode

Debug mode

VS Code extension

Custom scripts

Modes of executing tests

Built in locators

Locators

Find selectors using the VSCode extension

Find selectors using the browser DevTools `Inspect` tool

Figuring out the steps to be done for the test

Writing the tests

Writing our first Playwright test

Playwright hooks

Introduction

Benefits of using the Page Object Model

Page Object Models

Built-in fixtures

Custom fixtures

Page Object Models as fixtures

Fixtures

Writing tests for the user registration page

Using faker to generate random data

Introducing POMs

The need for fixtures

POMs and Fixtures - Practical example

test.skip()

test.only()

test.fail()

test.fixme()

test.step()

test.slow()

Annotations

Test isolation

Debugging flakiness

Adding tests for the tasks page

The need for a global setup

Configuring global setup for the login action

Configuring the Base URL

Refactoring our tests with the changes in configuration

Adding a `storageState`

Global teardown

Why should we not commit the storage state file?

Adding tests for tasks and global setup

Delete a task

Adding tests for starring and un-starring

Adding tests which verify multiple users - Multi-page tests

Completing the tests for the tasks page

Importance of cleanup after tests

Implementing cleanup after tests in Playwright

Refactoring the tests to cleanup the artifacts

Bonus: Refactoring the tests with the beforeEach block

When to use `beforeAll` and `afterAll` and when not to use them

Importance of proper cleanup after tests

1. Make tests behavioral

2. Make tests isolated

3. Avoid testing third-party dependencies

4. Locators

5. Use web first assertions

6. Add assertions to each test

7. Avoid too many nested describe, test and step blocks

8. Beware of missing await

9. Avoid conditional logic within tests

10. Avoid using element handles

11. Avoid using { force: true }

12. Avoid waiting for networkidle

13. Avoid using nth-methods

14. Double check before using negative assertions

15. Avoid waitForTimeout

16. Prefer strict equality assertions

17. No need of common assertions for actionable elements before performing actions

18. Prefer `{exact: true}` for locator matching

1. Use proper step blocks

2. Wait for the API responses

3. Use utils and methods from neeto-playwright-commons

4. Use i18n locales when asserting texts

5. Avoid string interpolation with translations

6. Avoid redundant awaits when nesting async methods

7. Avoid adding sensitive data into git tracked env files

8. Avoid destructuring fixtures in tests

9. Move hardcoded selectors and texts to respective constant folders.

Best practices

Selectors, Texts and Locators

Automating the comments feature

**Managing Multiple Responses**

Waiting for API responses

Using `Locator.check()` vs `Locator.click()` when checking a checkbox

Avoid using `Locator.clear()` before `Locator.fill()`

Using `Expect.poll()` and `Expect.toPass()` to retry blocks of code

Tips and tricks

Refactoring the existing code based on the best practices

Practice questions

/learn-qa-automation-using-playwright/introduction-to-playwright

Automation using Playwright

BigBinary Academy