Playwright was created to accommodate the needs of end-to-end testing. It supports all modern rendering engines, including Chromium, WebKit, and Firefox. It has an incredible architecture using WebSockets connection protocol, which means more efficient communication between test commands and actions in your browsers. Another great advantage is that it runs all your test in parallel and generates an excelent build-in report. Let’s start by installing NodeJS on our computer, I highly recommend using NVM so you can manage different versions. Once installed, let’s create a new directory named playwright-getting-started and execute this command inside that new directory:
npm init playwright@latest
When, select these options:
➜ playwright-getting-started npm init playwright@latest
Need to install the following packages:
create-playwright@latest
Ok to proceed? (y) y
Getting started with writing end-to-end tests with Playwright:
Initializing project in '.'
✔ Do you want to use TypeScript or JavaScript? · JavaScript
✔ Where to put your end-to-end tests? · tests
✔ Add a GitHub Actions workflow? (y/N) · y
✔ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · Y
Then, you should see this output:
And check out the following files:
- .\tests\example.spec.js - Example end-to-end test
- .\tests-examples\demo-todo-app.spec.js - Demo Todo App end-to-end tests
- .\playwright.config.js - Playwright Test configuration
Visit https://playwright.dev/docs/intro for more information. ✨
Happy hacking! 🎭
That’s right! Playwright supports GitHub Actions by default; how cool is that? In the ${PROJECT_HOME}/tests/ directory create a file named: home.spec.js with this content:
const { test, expect } = require("@playwright/test")
test("should validate page title", async ({ page }) => {
await page.goto("https://vetlog.org/")
await expect(page).toHaveTitle("Vetlog")
})
To run our test, type this command:
npx playwright test
You should get this output:
Running 3 tests using 3 workers
3 passed (6.2s)
As you can see, our test was executed in three browsers: Chromium, Firefox, and WebKit(Safari). We do not want to hardcode values, therefore let’s create a properties file named: test.properties.js under ${PROJECT_HOME}/properties/ directory with this content:
module.exports = {
url: "https://vetlog.org/",
title: "Vetlog",
}
So that, we can insert these values in our test
const { test, expect } = require("@playwright/test")
const properties = require("../properties/test.properties")
test("should validate page title", async ({ page }) => {
await page.goto(properties.url)
await expect(page).toHaveTitle(properties.title)
})
To open last HTML report run:
npx playwright show-report
If you want to know how many ways we have to execute Playwright tests from command-line, please go here. To browse the code go here, to download the project:
git clone git@github.com:josdem/playwright-workshop.git