/sample-playwright-testing

Sample for e2e/frontend testing (used for talks)

Primary LanguageTypeScriptMIT LicenseMIT

sample-playwright-testing

Sample for e2e/frontend testing (used for talks)

Demo

Preparation

  1. Clone https://github.com/sspringer82/wdc-next
  2. Open project wdc-next
  3. Start backend npm run backend
  4. Start frontend npm run dev
  5. Open ui: http://localhost:3000
  6. Open project in visual studio code

Demo flow

We already initialized playwright via npm init playwright@latest

  1. Run the tests with npx playwright test --headed --trace on

  2. Show results npx playwright show-report

  3. Show visual studio extension

  4. Debug existing test

  5. Record a new test

    1. Open page
    2. Click Pizza
    3. Click headline
    4. Back
    5. Add to car
    6. Open Cart
    7. CLick item in cart
    8. Buy
    9. Click thank you

  6. Add some assertions (one failing)

await page.goto('http://localhost:3000/list');

  await page.getByRole('link', { name: 'Pizza' }).click();
  await page.getByRole('link', { name: 'zurück zur Übersicht' }).click();

  await page.getByTestId('add-to-cart-1').click();

  await page.getByLabel('add to shopping cart').click();
  
  await expect(page.getByTestId('item-title-1')).toContainText("Pizza");

  await page.getByRole('button', { name: 'kaufen' }).click();
  await expect(page.getByRole('heading', { name: 'Danke!' })).toBeVisible();
```