Playwright, end to end testing for web apps

@luucamay_

@luucamay_

  • Ex-Developer Advocate Laboratoria 🎤
  • Ex-Software Engineer in Microsoft 👩‍💻
  • Studied at UMSA 🤓
  • Made in El Alto, Bolivia 🏔️
  • Love to dance 💃

What is Playwright?

Open Source framework

for reliable end to end testing cross browser (Firefox, Chrome, Edge, Safari, mobile browsers)

for modern web apps

Do we need another ui automation framework?

Do we need another ui automation framework?

Do we need another ui automation framework?

Do we need another ui automation framework?

Do we need another ui automation framework?

Do we need another ui automation framework?

Playwright, overview

  • A fork of Puppeteer

Playwright, overview

  • A fork of Puppeteer
  • Supported by puppeteer team at Microsoft

Playwright, overview

  • A fork of Puppeteer
  • Supported by puppeteer team at microsoft
  • Download from npm
  • 34k+

Playwright, overview

  • A fork of Puppeteer
  • Supported by puppeteer team at microsoft
  • Download from npm
  • 34k+
  • Currently supports other languages:
    • Golang, C#, java, python

Playwright, overview

  • A fork of Puppeteer
  • Supported by puppeteer team at Microsoft
  • Download from npm
  • 49k+
  • Currently supports other languages:
    • Golang, C#, java, python
  • Version 1.0 -> Released in may 2020

A playwright script

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

test('basic test', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  const title = page.locator('.navbar__inner .navbar__title');
  await expect(title).toHaveText('Playwright');
});

👀Can you write a test?

VSCode Extension

Installing...

Final result

Codegen

Magic command 🪄

npx playwright codegen

https://openai.com

Other programming languages?

Challenge

  1. Write a test with Codegen and Playwright for your favorite website.

  2. Take an image or video of your test and tag me on Twitter or Linkedin @luucamay_ #ReactEnTiemposDeChatGPT

Execute your test

npx playwright test

Are all my test passing?

Debug with Playwright Inspector

How did it help me at work?

My playwright script

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

test('test with screenshot', async ({ page }) => {
  await page.goto('https://msn.com/en-gb');
  const element = page.locator('#onetrust-banner-sdk');
  await page.screenshot({
    path: `screenshot.png`,
  })
  await expect(element).toBeVisible();
});

Learn more

More from me

Made with Slides.com