Playwright Complete Revision

LOCATE → ACTION → VERIFY

Locator finds the element. Action tells the browser what to do. Assertion proves the expected result.

What does await mean?

Browser operations take time. await tells JavaScript to wait for the operation before continuing.

User-facing locators

• getByRole() — by role/name
• getByLabel() — form control by label
• getByPlaceholder() — placeholder
• getByAltText() — image alt text
• getByTitle() — title
• getByTestId() — test-specific attribute
• getByText() — visible text

CSS / XPath / locator()

Use locator() when a stable semantic locator is unavailable or when CSS/XPath is appropriate for the actual DOM.

page.locator('#username')
page.locator('.product-image-wrapper')
page.locator('input[type="checkbox"]')

Position / filtering

locator.first()
locator.last()
locator.nth(2)
locator.filter({ hasText: 'Blue Top' })
locator.filter({ visible: true })
await locator.all()

nth(2) means the third matching element because indexing starts at 0.

Locator discipline

• Prefer meaningful, stable locators.
• Do not use nth() blindly.
• Inspect actual HTML before copying a locator.
• A locator identifies an element; it does not perform the action.

Classic confusion

// Retrieve
const value = await email.inputValue();

// Assert
await expect(email).toHaveValue('test@gmail.com');

Count confusion

// Retrieve a number
const count = await items.count();

// Assert exact DOM count
await expect(items).toHaveCount(5);

// Array length
const texts = await items.allTextContents();
await expect(texts).toHaveLength(5);

Textbox

const email = page.getByRole('textbox', { name: 'Email Address' });

await expect(email).toBeVisible();
await expect(email).toBeEnabled();
await expect(email).toBeEditable();

await email.fill('test@gmail.com');
await expect(email).toHaveValue('test@gmail.com');

const value = await email.inputValue();

Checkbox

const monday = page.getByLabel('Monday');

await monday.check();
await expect(monday).toBeChecked();

const selected = await monday.isChecked();

await monday.uncheck();

Radio

const male = page.getByLabel('Male');

await male.check();
await expect(male).toBeChecked();

Memory trick: Radio = ONE.

Native dropdown

const country = page.locator('#country');

await country.selectOption('india');
await expect(country).toHaveValue('india');

await country.selectOption({ label: 'Germany' });
await country.selectOption({ index: 2 });

Auto-suggestion dropdown

await page.locator('#search').fill('java');

const suggestions = page.locator('#suggestions li');
const items = await suggestions.all();

for (let item of items) {
  const text = await item.textContent();

  if (text && text.trim() === 'Java Selenium') {
    await item.click();
    break;
  }
}

Dynamic button / timer

Your practice page included a dynamic button/timer area. The key lesson is to interact with the state the application actually presents and verify the resulting state rather than relying on arbitrary delays.

Alerts & popups

The practice page included simple, confirmation, and prompt-style modal alerts, plus popup-related exercises. The core idea is to identify whether you are dealing with a page element/modal or a separate browser/page event and automate the correct object.

Tabs inside a page

For UI tabs, locate the tab buttons and verify the associated content/state. This is different from browser tabs/pages, which use the Page objects discussed later.

Mouse actions

await locator.hover();
await locator.dblclick();
await locator.click({ button: 'right' });
await locator.scrollIntoViewIfNeeded();

Keyboard actions

await locator.click();
await page.keyboard.type('Bruce Wayne');
await page.keyboard.press('Tab');
await page.keyboard.press('Escape');

Example workflow: click a field → type → Tab → type next field → Tab/Escape → assert values.

Calendar navigation

Open the date picker, inspect the displayed month/year, navigate with the previous/next controls, then select the target date.

const datePicker = page.locator('#datepicker');
await datePicker.click();

console.log(await page.locator('.ui-datepicker-year').innerText());
console.log(await page.locator('.ui-datepicker-month').innerText());

// navigate until the required month/year
// then click the required date

Native select inside a date picker

const yearDropdown = page.locator('.ui-datepicker-year');
await yearDropdown.selectOption({ label: '2025' });

const monthDropdown = page.locator('.ui-datepicker-month');
// The actual option label on your practice page was 'Nov'
await monthDropdown.selectOption({ label: 'Nov' });

Drag and drop

const source = page.locator('#drag-src');
const target = page.locator('#drag-tgt');

await source.dragTo(target);

const afterDropText = await target.innerText();
console.log(afterDropText);

Range slider

const volumeSlider = page.locator('#volumeSlider');

await volumeSlider.evaluate((slider) => {
  slider.value = 80;
});

This is the simple DOM-property approach you practiced. Your class material did not add event dispatching to this exercise.

Why normal locators fail

page.locator() searches the main page DOM. An element inside an iframe belongs to that frame's DOM.

Frame locator

const frame = page.frameLocator('#loginFrame');

await frame
  .locator('#username')
  .fill('admin');

Access a frame by URL

const frame1 = await page.frame({
  url: 'https://ui.vision/demo/webtest/frames/frame_1'
});

await frame1
  .getByRole('textbox')
  .fill('STAD Solution');

Nested frames

const frame3 = page.frame({ url: /frame_3/ });

await frame3
  .locator('input[name="mytext3"]')
  .fill('welcome');

const childFrames = frame3.childFrames();

const radioButton = childFrames[0]
  .locator('//[@id="i5"]/div[3]/div');

await radioButton.check();
await expect(radioButton).toBeChecked();

Memory model: main page → frame → child frame → element.

Manual page creation

const browser = await chromium.launch();

const context = await browser.newContext();

const page1 = await context.newPage();
const page2 = await context.newPage();

const allPages = context.pages();
console.log(allPages.length);

Wait for a newly opened page

const newPagePromise = context.waitForEvent('page');

await page.getByText('New Tab').click();

const newPage = await newPagePromise;
await newPage.waitForLoadState();

Single file upload

await page
  .locator('#file-upload')
  .setInputFiles('testdata/sample.pdf');

The file path is relative to the project root in the exercise.

Multiple file upload

await page
  .locator('#file-upload')
  .setInputFiles([
    'testdata/file1.pdf',
    'testdata/file2.pdf'
  ]);

The same setInputFiles() concept handles multiple files when the input supports it.

Best practical pattern

test.describe('Login Tests', () => {

  test.beforeEach(async ({ page }) => {
    await page.goto(LOGIN_URL);
  });

  test('valid login', async ({ page }) => {
    // test
  });

});

Important distinction

Use beforeEach when each test needs a fresh page/setup. Do not try to use the test-scoped page fixture as though it were a suite-wide object in beforeAll.

test.describe()

test.describe('Login Module', () => {

  test('valid login', async ({ page }) => {
    // ...
  });

  test('invalid login', async ({ page }) => {
    // ...
  });

});

Why groups matter

• Cleaner structure
• Selective execution
• Shared hooks
• Better debugging
• Scalability
• Team ownership
• Clearer reports

AND logic for tags

npx playwright test --grep "(?=.*@smoke)(?=.*@regression)"

The class example used a regex lookahead to select tests carrying both tags.

Sequential

Tests run one after another in the same worker flow. Useful when you deliberately want controlled ordering, but independent tests are generally easier to maintain.

Parallel

Independent tests can execute concurrently across workers. This can reduce total execution time, especially in CI.

Why reports matter

• Quickly identify failing tests
• Share results with non-technical stakeholders
• Track regressions and trends
• Useful in CI/CD

HTML reporter

export default defineConfig({
  reporter: 'html'
});

What is flaky?

Common causes

1. Timing / synchronization
2. Unstable or incorrect locators
3. Slow API / network
4. Dynamic test data
5. Race conditions
6. Tests depending on other tests

Retries

export default defineConfig({
  retries: 2
});

Retry runs a test again when it fails. If it passes on retry, the result can be reported as flaky.

repeatEach

Repeats every test, including tests that pass, mainly to investigate instability.

Basic login coverage you executed

1. Login page
2. Login UI elements
3. Valid credentials
4. Invalid username
5. Invalid password
6. Invalid username + password
7. Empty username
8. Empty password
9. Empty username + password
10. Forgot password

Professional grouping direction

• Smoke: availability, essential UI, valid login, forgot-password navigation
• Regression: validations, whitespace, masking, refresh/state, URL leakage, boundary behavior
• Security / robustness: harmless injection/XSS checks and resilience observations

1. Locator ≠ element state

Creating a locator does not mean the element is visible, selected, or ready. Use the appropriate assertion/state query.

2. Retrieve vs assert

inputValue() gets a value; toHaveValue() checks it. Same idea for count() vs toHaveCount().

3. Missing await

If a method returns a Promise and you forget await, you may compare a Promise instead of the actual result.

4. Wrong expected type

toHaveText() expects a string/regex, not a Locator object.

5. Strict mode

Multiple matches can make Playwright reject an ambiguous locator. Make the locator more specific instead of blindly adding positions.

6. CSS selector syntax

Classes require dots; attribute selectors need correct quoting/brackets. A malformed selector can fail before the browser even searches for the element.

7. Actual DOM beats assumptions

Your date-picker failure showed that the actual option label was Nov, not November. Inspect the page instead of guessing.

8. Event listener order

For downloads and new pages, register the event listener/promise before triggering the action.

Core

Controls

Framework

Advanced practical