1. Browser & Context
Management
Import Statement
const { chromium
} = require('playwright');
Ø require('playwright'): Imports the Playwright
library
Ø { chromium }: Destructures the Chromium browser
object from the library
Ø This is required to use any Playwright browser
functions
Launch Browser
const browser = await
chromium.launch({
headless: false,
slowMo: 100,
});
Ø chromium.launch(): Starts a Chromium browser
instance
Ø await: Pauses execution until browser launches
(required for async operations)
Ø Options:
o headless: false: Makes browser visible (default
is true/invisible)
o slowMo: 100: Adds 100ms delay between actions
(helps see what's happening)
2. Create Browser Context
const context = await
browser.newContext();
const page = await
context.newPage();
Ø browser.newContext(): Creates an isolated
environment (like a private browsing session)
Ø context.newPage(): Opens a new tab/page in the
browser
Ø Each context can have multiple pages (tabs)
3. Close Browser
await browser.close();
Ø Closes the browser and all associated
pages/contexts
Ø Always include this at the end of your scripts to
clean up resources
4. Page Navigation
Go to URL
await page.goto('https://example.com');
Ø goto(): Navigates to the specified URL
Ø Similar to typing an address in the browser's
address bar
5. Element Interaction
Click Element
await page.click('button#submit');
Ø click(): Simulates a mouse click
Ø 'button#submit': CSS selector meaning "button
element with id='submit'"
Type Text
await page.fill('#username',
'john_doe');
Ø fill(): Types text into an input field
Ø First argument is selector, second is text to input
Ø Automatically clears existing content
6. Element Selectors
CSS Selector Example
await page.click('.button-primary');
Ø .button-primary: Selects elements with
class="button-primary"
Ø Similar to how CSS styles target elements
Text Selector
await page.click('text=Login');
Ø text=Login: Finds elements containing exact text
"Login"
Ø Case-insensitive by default
7. Waiting for Elements
Explicit Wait
await page.waitForSelector('.result');
Ø Pauses execution until element matching .result appears
Ø Prevents errors from interacting with elements that
haven't loaded
8. Handling Alerts
page.on('dialog',
async dialog => {
await dialog.accept();
});
Ø page.on('dialog'): Listens for popup dialogs
Ø dialog.accept(): Clicks "OK" in
confirmation dialogs
Ø Must be set up before the dialog appears
9. Screenshots
await page.screenshot({
path: 'screenshot.png' });
Ø Takes a picture of the current page view
Ø path: Specifies where to save the image file
Ø fullPage: true option captures entire
scrollable page
10. Closing Resources
await page.close();
Ø Closes the current tab
Ø Recommended to close pages/contexts when you're
done with them
Key JavaScript Concepts in These Examples:
1.
async/await:
Handles asynchronous operations (like network requests)
2.
const: Declares
variables that won't be reassigned
3.
Arrow
functions () => {}: Compact function syntax
4.
Objects {
key: value }: Used for passing options
5.
Promises:
Underlying mechanism for most Playwright operations
0 Comments