Automation Testing - Playwright With JavaScript Tutorials

.

 How to Check Node Version?

node -v

How to check npm (Node Package Manager version)?

npm -v

 How to Check Playwright Version?

npx playwright --version

First Test in Playwright

import two packages (test and expect)

Here, {page}is called a fixture

const { test, expect } = require('@playwright/test');

test('Google Search', async ({ page }) => {

 

});

Playwright Command

How to run all test files on all browsers in headless mode?

npx playwright test 

How to run a specific test file on all browsers in headless mode?

npx playwright test playwrighttest.spec.js

How to run the test file on all browsers in headed mode?

npx playwright test playwrighttest.spec.js --headed

How to run the test file on a specific browser?

npx playwright test playwrighttest.spec.js  --project=chromium --headed

How to run the test file on a specific browser in debug mode?

npx playwright test playwrighttest.spec.js  --project=chromium --headed --debug

Playwright Web Action

Open URL

 

Goto method is used to open a browser.

const { test, expect } = require('@playwright/test');

test('Google Search', async ({ page }) => {

  await page.goto('https://www.google.com/');

 

});

Get Page title (Print and validate )

const { test, expect } = require('@playwright/test');

test('Google Search', async ({ page }) => {

  await page.goto('https://www.google.com/');

  const titl= await page.title();

  console.log(titl);

  await expect(page).toHaveTitle('Google');

});

Get URL (Print and validate )

/verify url

  const pageurl = await page.url();

  console.log(pageurl);

 await expect(page).toHaveURL('https://www.google.com/');

Locator in Playwright

Css 

Xpath

Playwright Built-in Locators

page.getByRole() to locate by explicit and implicit accessibility attributes.

const submitButton=await page.getByRole('button',{type:'submit'});

   await submitButton.click();

})

page.getByText() to locate by text content.

 const orangeHrmText=await page.getByText('OrangeHRM OS 5.9');

   await expect(orangeHrmText).toBeVisible();

page.getByLabel() to locate a form control by associated label's text.

page.getByPlaceholder() to locate an input by placeholder.

const usernameInput=await page.getByPlaceholder('Username');

   await usernameInput.fill('Admin');

   const passwordInput=await page.getByPlaceholder('Password');

   await passwordInput.fill('admin123');

page.getByAltText() to locate an element, usually an image, by its text alternative.

 const logo=await page.getByAltText('company-branding')

   await expect(logo).toBeVisible();

page.getByTitle() to locate an element by its title attribute.
page.getByTestId() to locate an element based on its data-testid attribute (other attributes can be configured).

Assertion in Playwright

1. toHaveURL