11. How to open a browser in playwright ?
There are two common ways to open a browser in Playwright: using the built-in page fixture and launching the browser manually.
1. Using the Playwright fixture
import { test } from '@playwright/test';
test('open a browser', async ({ page }) => {
await page.goto('https://www.example.com/');
});
In this:
Playwright automatically creates the browser, browser context, and page.
You can directly use page.goto() to navigate to a URL.
Playwright manages the browser lifecycle for you.
2. Without using the Playwright fixture import { test, chromium } from '@playwright/test';
test('open a browser', async () => {
const browser = await chromium.launch();
const context = await browser.newContext();
const page = await context.newPage(); await page.goto('https://www.example.com/');
await browser.close();
});
In this:
You manually launch the browser using chromium.launch().
You create a browser context and a page.
You are responsible for closing the browser. 12. How do you correlate the Browser, Context, and Page in Playwright?Let's start with the Page.
- Page: A Page represents a single browser tab or a window within a browser context.
- Context: A Browser Context is an isolated browser session(isolated window or new window). It has its own cookies, local storage, session storage, and other session-related data. Multiple pages within the same context share the context's applicable session data. Separate contexts are isolated from each other. For example, two separate contexts(windows) can represent two different users.
- Browser: A Browser represents an instance of a browser engine, such as Chromium, Firefox, or WebKit. A browser instance can contain multiple browser contexts, and each context can contain multiple pages.
Hierarchy:
Browser
├── Context 1 (User A)
│ ├── Page 1 (Tab 1)
│ └── Page 2 (Tab 2)
└── Context 2 (User B)
└── Page 3 (Tab 1)
In short, a Browser contains contexts, and each Context contains pages. Pages within the same context share applicable session data, while separate contexts provide isolated sessions.
13. How to add or import modules or packages in any playwright class ?
In java script, we can import like this:
import { test, expect, Page } from '@playwright/test';
import { Helper } from './utils/helpers';
import { testClass1,testClass2 } from './tests/folder1/testClass'; // here the methods testClass1and testClass2 have been imported from the class tests/folder1/testClass.js
or
const { test, expect, Page } = require( '@playwright/test');
const { Helper } = require( './utils/helpers');
const { testClass1,testClass2 } = require( './tests/folder1/testClass');
Some points to remember:
test and expect are Playwright exports.
Helper must be exported from utils/helpers.js.
testClass1 and testClass2 must be exported from testClass.js.
Page is a TypeScript type, not a runtime JavaScript export you normally need. If you're writing plain JavaScript, remove it from the import.
In above example, your class testClass.js file could look like this:
export class testClass1 {
method1_class1() {
console.log('Method1_class1');
}
method2_class1() {
console.log('Method2_class1');
}
}
export class testClass2 {
method1_class2() {
console.log('Method1_class2');
}
}
//-------------------------------------------------------Then use the classes in your importing test:
import { test, expect } from '@playwright/test';
import { testClass1, testClass2 } from './tests/folder1/testClass';
test('example', async ({ page }) => {
const obj1 = new testClass1();
const obj2 = new testClass2();
obj1.method1_class1();
obj1.method2_class1();
obj2.method1_class2();
});
class testClass1 {
method1_class1() {
console.log('Method1_class1');
}
method2_class1() {
console.log('Method2_class1');
}
}
class testClass2 {
method1_class2() {
console.log('Method1_class2');
}
}
module.exports = { testClass1, testClass2 };
//-------------------------------------------------------
Then use the classes in your importing test:
const { test, expect } = require('@playwright/test');
const { testClass1, testClass2 } = require('./tests/folder1/testClass');
test('example', async ({ page }) => {
const obj1 = new testClass1();
const obj2 = new testClass2();
obj1.method1_class1();
obj1.method2_class1();
obj2.method1_class2();
});
16. How do you record in Playwright?
We can record user actions in Playwright using the Codegen tool. It opens a browser and the Playwright Inspector, records our actions, and generates Playwright code.
Common Codegen commands:
npx playwright codegen— Opens the browser and Playwright Inspector.npx playwright codegen https://www.google.com— Opens the specified URL directly.npx playwright codegen --browser firefox— Launches Firefox instead of the default Chromium browser.npx playwright codegen --viewport-size="600,600"— Sets the browser viewport to 600 × 600 pixels.npx playwright codegen --device="iPhone X"— Emulates an iPhone X device (the device name must be supported).npx playwright codegen --color-scheme=dark— Emulates dark color scheme preferences.npx playwright codegen --help— Displays available Codegen options.
17. What are the hooks in Playwright?
Playwright has four main hooks:
beforeAll()— Runs once before all tests in the current scope.afterAll()— Runs once after all tests in the current scope.beforeEach()— Runs before each test.afterEach()— Runs after each test.
Note: When hooks are defined inside a test.describe() block, they apply to the tests within that block. When defined outside a describe block, they generally apply to tests in the file.
18. What are assertions in Playwright?
Assertions are used to verify whether the actual result matches the expected result in a test. Playwright provides the expect() function to perform assertions.
Common assertions in Playwright:
await expect(page).toHaveTitle('Home Page');await expect(page).toHaveURL('https://example.com');await expect(page.locator('#username')).toBeVisible();
await expect(page.locator('#username')).toBeEnabled();
await expect(page.locator('#username')).toHaveText('John');
await expect(page.locator('#username')).toHaveValue('John');
await expect(page.locator('#checkbox')).toBeChecked();
await expect(page.locator('.message')).toContainText('Success');
await expect(page.locator('#username')).toHaveCount(1);
await expect(page.locator('#username')).toHaveAttribute('id', 'username');
await expect(page.locator('#username')).toHaveClass('username-field');
Using not:
We can use ".not" to verify that a condition is false.
await expect(page.locator('#username')).not.toBeVisible();await expect(page.locator('#username')).not.toBeEnabled();await expect(page.locator('#username')).not.toHaveText('John');await expect(page.locator('#username')).not.toHaveValue('John');
19. What are Hard and soft assertions in Playwright ?
- Hard assertion: It is the default assertion. If this fails, the test stops at that point.
- Soft assertion: This uses
"expect.soft()." If thsi fails, the test continues, and the failure is reported at the end.
Example:
await expect.soft(page.locator('#username')).toBeVisible();
await expect.soft(page.locator('#username')).not.toBeEnabled();
20. What are annotations in Playwright?
Annotations are used to control test execution based on specific requirements.
Common annotations in Playwright:
1. only — Runs only the specified test or test group. Use it carefully because it can cause other tests to be excluded.
test.only('example', async ({ page }) => {
// Runs this test only
});
2. skip — Skips the test without executing it.
test.skip('example', async ({ page }) => {
// This test is skipped
});
3. fail — Marks a test as expected to fail, ie, to intentionally fail a test case. If it passes, Playwright reports an unexpected pass.
test.fail('example', async ({ page }) => {
// This test is expected to fail
});
4. fixme — Marks a test as needing a fix and skips its execution.
test.fixme('example', async ({ page }) => {
// This test is not executed
});
5. slow — Marks a test as slow and triples its test timeout compared to the default or configured timeout.
test('example', async ({ page }) => {
test.slow();
// Test steps
});
6. skip conditionally : Used to skip a test when a specified condition is met.
test('example', async ({ page, browserName }) => {
test.skip(browserName === 'firefox', 'Skip this test in Firefox');
// Test steps
});
Explanation: The test is skipped only when the browser is Firefox. Otherwise, the test executes normally.