tomoyachen / e2e-playwright-scaffold

E2E PLAYWRIGHT

Installation

install yarn (Skip if already installed)

npm install -g yarn

install libraries

yarn install

install supported browsers (Chromium, Firefox, Webkit)

yarn playwright install

Usage

yarn playwright test
yarn playwright test tests --project=chromium --headed --workers=5

Dev env

RUN_ENVIRONMENT=dev yarn playwright test

Prod env

RUN_ENVIRONMENT=prod yarn playwright test

For local use, you can create .env files to specify some environment variables.

.env

RUN_ENVIRONMENT = "dev"
DEBUG=pw:api

Playwright Test for VS Code

ref: https://playwright.dev/docs/getting-started-vscode

Project Directories

.
├── config    // 不同环境配置文件
│   └── dev.json
├── constants       // 不同环境常量数据
│   └── dev
│       └── users.json
├── pages    // POM
│   └── login
│       └── login.page.ts
├── tests    // 测试用例
│   ├── example.spec.ts
│   ├── global.setup.ts    // 预登陆
│   ├── login
│   │   └── login.spec.ts
│   ├── types.ts
│   └── utils.ts
├── package.json
├── playwright.config.ts
├── tsconfig.json
├── README.md
└── yarn.lock

Playwright Docs

POM (Page Object Models)

ref: https://playwright.dev/docs/pom

Command Line

ref: https://playwright.dev/docs/running-tests#command-line

yarn playwright test
yarn playwright test tests --headed --project=chromium --workers=1

yarn playwright show-report
yarn playwright show-report --port 9999

Test Generator

ref: https://playwright.dev/docs/codegen-intro

yarn playwright codegen playwright.dev

Locators

ref: https://playwright.dev/docs/locators

Action	Description
page.getByRole()
page.getByLabel()
page.getByPlaceholder()
page.getByText()
page.getByAltText()
page.getByTitle()
page.getByTestId()	testing stub, default: data-testid
page.locator()	CSS、XPath

---

Actions

ref: https://playwright.dev/docs/input

Action	Description
locator.check()	Check the input checkbox
locator.click()	Click the element
locator.uncheck()	Uncheck the input checkbox
locator.hover()	Hover mouse over the element
locator.fill()	Fill the form field (fast)
locator.focus()	Focus the element
locator.press()	Press single key
locator.setInputFiles()	Pick files to upload
locator.selectOption()	Select option in the drop down
locator.type()	Type text character by character (slow)

---

Assertions

ref: https://playwright.dev/docs/test-assertions

Assertion	Description
expect(locator).toBeChecked()	Checkbox is checked
expect(locator).toBeEnabled()	Control is enabled
expect(locator).toBeVisible()	Element is visible
expect(locator).toContainText()	Element contains text
expect(locator).toHaveAttribute()	Element has attribute
expect(locator).toHaveCount()	List of elements has given length
expect(locator).toHaveText()	Element matches text
expect(locator).toHaveValue()	Input element has value
expect(page).toHaveTitle()	Page has title
expect(page).toHaveURL()	Page has URL
expect(page).toHaveScreenshot()	Page has screenshot

---