Links: playwright MOC, Playwright Tutorial: Getting Started With Playwright Framework | LambdaTest

Playwright Tutorial Getting Started With Playwright Framework LambdaTest

1. Getting Started - Install Playwright in VS Code

  1. Open VS Code
  2. Install Playwright from marketplace
  3. Run command palette: install playwright
  4. Observe result
✔ Success! Created a Playwright Test project at /Users/maksim/repos/playwright-wywm

Inside that directory, you can run several commands:

  npx playwright test
    Runs the end-to-end tests.

  npx playwright test --project=chromium
    Runs the tests only on Desktop Chrome.

  npx playwright test example.spec.ts
    Runs the tests in the specific file.

  npx playwright test --debug
    Runs the tests in debug mode.

We suggest that you begin by typing:

    npx playwright test

And check out the following files:
  - ./example.spec.ts - Example end-to-end test
  - ./playwright.config.ts - Playwright Test configuration

Visit for more information. ✨

Happy hacking! 🎭

2. Run Sample Tests

  1. Run sample tests
npx playwright test
  1. Show report
npx playwright show-report

3. Show Trace

There are a few different ways these reports can be viewed.

npx playwright  show-trace test-results/example-Counter-should-display-the-current-number-of-todo-items-firefox/

4. How to Select N-th Element When Locator Points to a List

Locators | Playwright

Locators are strict. This means that all operations on locators that imply some target DOM element will throw an exception if more than one element matches given selector.

await page.locator("#user-message").first().fill(text);

5. How to Organise Test Suites in Playwright

links::Grouping and Organising Test Suite in Playwright | by Ganesh Hegde | Geek Culture | Medium

Run tests in folder

npx playwright test tests/home/

Run tagged tests

npx playright test --grep @smoke

6. Generate tests - Codegen command

npx playwright codegen

7. Handle multiple pages (tabs)

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

const baseUrl = "";
const rallypointUrl = "";

test("rallypoint link should redirect to Rallypoint page @smoke", async ({browser}) => {
  const browserInstance = await chromium.launch({ slowMo: 500 });
  const context = await browserInstance.newContext();
  const homePage = await context.newPage();
  await homePage.goto(baseUrl);

  // await homePage.locator("text=Rallypoint").click();

  const [newPage] = await Promise.all([
    context.waitForEvent("page"),"text=Rallypoint"), // Opens a new tab
  await newPage.waitForLoadState();
  console.log(await newPage.title());

  // Should remain on the same page - Home
  await expect(newPage).toHaveURL(rallypointUrl);

  // Check 'Kyewords' input field is present
  await expect(newPage.locator("body h1")).toHaveText("Get a tech job.");