Playwright

import {test} from "@playwright/test" :

• Import test function from Playwright package.

@playwright/test :

• This is the Playwright testing library/package.Installed using npm install @playwright/test

test :

• It provides many built-in functions, test, expect, request, browser etc. Here we are importing only test.

What is test() :

• It is a function provided by Playwright.

test("Login Test", async ({ page }) => {

});

• It creates a test case named "Login Test".

page.goto() :

• It is used to open a website in browser.

await page.goto("https://example.com");

await :

• Opening webpage takes time. So await makes wait until page fully loads.

page :

• This comes from Playwright fixture. It represents browser tab/page. this is used to open URLs,click buttons,type text,capture text, etc.

expect :

• It is used for verification/assertion. It checks whether something is correct, visible, equal, present, matching expected result.

• Most Playwright assertions are asynchronous. So await before expect().
  

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

test("Title Test", async ({ page }) => {

    await page.goto("https://example.com");

    await expect(page).toHaveTitle("Example Domain");

});

• Above Verifies page title matches expected value.

Common Assertions :

• Check Title - await expect(page).toHaveTitle("Google");

• Check URL - await expect(page).toHaveURL("https://google.com");

• Check Element Visible -
  await expect(page.locator("#login")).toBeVisible();

• Check Test -
  await expect(page.locator("h1")).toHaveText("Welcome");

• Check Input Value -
  await expect(page.locator("#name")).toHaveValue("Varun");

• Checks Partial text -
  await expect(page.locator("#dashboard")).toContainText(Dashboard);

• toBeDisabled()

• toBeEnabled()

• toBeVisible()

.fill() :

-It is used to enter text into textbox, input field, and textarea. It clears existing text and types new text.

const username = page.locator("#username");
await username.fill("admin");
await page.fill("#username", "admin");

.clear() :

-It is used to remove existing text from, input box, textbox, and textarea.
await page.locator("#username").clear();

.click() :

• It is used to click elements like, buttons, links, checkboxes, radio buttons, and menu items.

const btn = page.locator("#login");
await btn.click();

toBeChecked() :

• It is used to verify whether, checkbox is checked, and radio button is selected.

const checkbox = page.locator("#terms");
await checkbox.check();
await expect(checkbox).toBeChecked();

not.toBeChecked() :

• It is used to verify whether, checkbox and radio button is not checked.

const checkbox = page.locator("#terms");
await checkbox.check();
await expect(checkbox).not.toBeChecked();

click() vs check() :

click() :

• buttons,links,checkboxes,radio buttons,any clickable element.
• Just clicks. Suppose checkbox already checked. click() makes checkbox becomes unchecked. check() :
• checkboxes,radio buttons.
• checks current state,only checks if needed,ensures final state is checked. Suppose checkbox already checked. check() remains checked.