Sample-Code

Every virtual machine comes with some basic sample code. With this samples you can learn the most common browser operations. Playwright supports three browser engines: Chromium, Firefox and WebKit (Safari).

The below sample code is for Ubuntu server without a graphical user interface. Sample code for other OS and browsers can be found on the virtual machines.



Init Playwright:

First the pre-installed Playwright nodejs module needs to be included. Afterwards, the browser, a session and a new page will be opened with the defined screen size. The last line closes the browser instance again.



const { webkit, firefox, chromium } = require('playwright');
 
(async () => {
  const browser = await chromium.launch();
    
  // Create session with given browser size
  const context = await browser.newContext({
    viewport: { width: 1500, height: 700 }
  });
    
  // New Page
  const page = await context.newPage();
  
  // following actions
  
  await browser.close();
}
const { webkit, firefox, chromium } = require('playwright');
 
(async () => {
  const browser = await firefox.launch();
    
  // Create session with given browser size
  const context = await browser.newContext({
    viewport: { width: 1500, height: 700 }
  });
    
  // New Page
  const page = await context.newPage();
  
  // following actions
  
  await browser.close();
}
const { webkit, firefox, chromium } = require('playwright');
 
(async () => {
  const browser = await webkit.launch();
    
  // Create session with given browser size
  const context = await browser.newContext({
    viewport: { width: 1500, height: 700 }
  });
    
  // New Page
  const page = await context.newPage();
  
  // following actions
  
  await browser.close();
}

Navigate to URL:

We now navigate to this web page.

await page.goto('https://selenium.cloud/doc/playwright-samples.html');

Take a screenshot:

Let us take a screenshot to prove we are on the correct page. This also works in headless browser!

await page.screenshot({ path: 'screenshot1.png' });

Click on element via XPath:

Before we can click an element on the page, we need to locate it. There are different methods to achieve this, the most common way is via XPath.
There are dozens of good tools to get the XPath of elements, Chrome has also one built-in.

Below you find a screenshot of the popular ChroPath plugin:


Learn more about XPath here.

// clicking on element by relative xpath
await page.click('xpath=//a[@id="webkit-tab"]');

// clicking on element by absolute xpath - xpath notation also gets detected automatically
await page.click('//main/section/div/ul/li[1]/a');

Send string to input field and open popup:

Now we type in some text into a text field. Afterwards we click on the button which opens a small popup.

await page.fill('#text-field', 'Sent from Playwright!');
await page.click('//button[contains(text(),"Click me!")]');


Wait for element:

If you want to explicy wait for an element to be displayed, use:

await page.waitForSelector('#modalbody-text');

Get text of element:

The last code block shows you, how you can pull out the visible text of an element.

const value = await page.$eval('div[id=modalbody-text]', el => el.innerText);
console.log("Text of popup: "+value);