Write once, test everywhere with Playwright

Write once,
test everywhere with Playwright

Luca Del Puppo

Write once, test everywhere with Playwright Luca Del Puppo

	import { expect, test } from "@playwright/test";

	test("has title", async ({ page }) => {
	await page.goto("https://delpuppo.net/");

	// Expect a title "to contain" a substring.
	await expect(page).toHaveTitle(/luca del puppo \| developer portfolio/i);
	});

	import { expect, test } from "@playwright/test";

	test("has title", async ({ page }) => {
	await page.goto("https://delpuppo.net/");

	// Expect a title "to contain" a substring.
	await expect(page).toHaveTitle(/luca del puppo \| developer portfolio/i);
	});

	import { expect, test } from "@playwright/test";

	test("has title", async ({ page }) => {
	await page.goto("https://delpuppo.net/");

	// Expect a title "to contain" a substring.
	await expect(page).toHaveTitle(/luca del puppo \| developer portfolio/i);
	});

	import { expect, test } from "@playwright/test";

	test("has title", async ({ page }) => {
	await page.goto("https://delpuppo.net/");

	// Expect a title "to contain" a substring.
	await expect(page).toHaveTitle(/luca del puppo \| developer portfolio/i);
	});

	import { expect, test } from "@playwright/test";

	test("has title", async ({ page }) => {
	await page.goto("https://delpuppo.net/");

	// Expect a title "to contain" a substring.
	await expect(page).toHaveTitle(/luca del puppo \| developer portfolio/i);
	});

Write once,
test everywhere with Playwright

Are you writing test?_

Testing

Playwright Testing

What this talk is not

What this talk is

A good starting point to know

Playwright features

Let’s start the journey_

Installation

Select Browser & GitHub Actions

After the installation

Test Fundamentals_

The VsCode’s benefits_

Run tests

Debug tests

Locators

Familiar with @testing/library?

Web Assertions

Web First Assertion

Picking Selectors

Code Generator

But what about assertion?

Show Reports

Trace File

Emulation

Devices

View Port

Others

Github Actions

Component Testing

Component Testing

Others helpful features

Conclusion

That's all

Luca Del Puppo

We are hiring

Thank you!_

	import { test, expect } from '@playwright/test';

	// Run tests in this file with portrait-like viewport.
	test.use({
	viewport: { width: 600, height: 900 },
	});

	test('my portrait test', async ({ page }) => {
	// ...
	});

	name: Playwright Tests
	on:
	push:
	branches: [ main, master ]
	pull_request:
	branches: [ main, master ]
	jobs:
	test:
	timeout-minutes: 60
	runs-on: ubuntu-latest
	steps:
	- uses: actions/checkout@v3
	- uses: actions/setup-node@v3
	with:
	node-version: 16
	- name: Install dependencies
	run: npm ci
	- name: Install Playwright Browsers
	run: npx playwright install --with-deps
	- name: Run Playwright tests
	run: npx playwright test
	- uses: actions/upload-artifact@v3
	if: always()
	with:
	name: playwright-report
	path: playwright-report/
	retention-days: 30

	import { expect, test } from '@playwright/experimental-ct-react';
	import FilterTag from './index';

	test.describe('FilterTag', () => {

	test('should render', async ({ page, mount }) => {
	await mount(<FilterTag name="All" active={true} />);

	await expect(page.locator('text=All')).toBeVisible();
	});

	});