Playwright Questions Set- 3

• How do you launch a new browser instance using Playwright?

Ans: First of all install Playwright

npm install playwright

Then create a file named test.js, and import the chromium browser

Then use the chromium.launch() function to launch the browser.

• What is the difference between page.click() and page.dblclick() methods in Playwright?

Ans: The click() method simulates a single left-click event on an element. It triggers the standard click event that you would expect when a user clicks on an element with the left mouse button.

await page.click('button');

The dblclick() method simulates a double-click event on an element. It triggers two consecutive click events in quick succession, mimicking a user double-clicking with the left mouse button.

await page.dblclick('input');

• How do you wait for an element to be visible on a page using Playwright?

Ans: To wait for an element to be visible on a page using Playwright, you can utilize the waitForSelector function. This function allows you to wait until a specific selector matches an element that is visible in the DOM. Here’s how you can use it:

To make it more customisable, you can pass many options in the waitForSelector() method – one of them is the state of element

There are basically four different states that can be passed

1. ‘attached’
2. ‘detached’
3. ‘visible’
4. ‘hidden’

You can read about the meaning of the state’s here.

• How can you interact with dropdown/select elements using Playwright?

Ans: To interact with dropdown or select elements using Playwright, you can use the selectOption() function. This function allows you to select an option from a dropdown by either its value, label, or index.

As mentioned, the items can be selected in three different ways

1. By the value
2. By the label
3. By the index

• How do you handle pop-up dialogs/alerts in Playwright?

Ans: To handle pop-up dialogs and alerts in Playwright, you can use the dialog event in combination with the page.on() method.

• How can you take a screenshot of a specific element on a page using Playwright?

Ans: It’s very simple to take screenshot of an element in Playwright

await page.locator('your_locator').screenshot();

If you want to disable animations and save to a specific directory

await page.locator(your_locator).screenshot({animations: 'disabled', path:'/screenshots/locatorimage.png'})

• How do you simulate keyboard input events (e.g., typing) using Playwright?

Ans: Let’s say you want to simulate a real using typing in Playwright, then you can use locator.type() method, along with a delay to simulate a keydown, keypress/input, and keyup event for each character in the text.

await page.locator('your_locator').type('type something',{delay: 100}).  // delay of 100ms for each character typed

You can simulate a keypress with locator.press('Enter') to simulate an Enter press from keyboard

await page.locator('your_locator').press('Enter')

To simulate another press action like backspace, you can use locator.press()

await page.locator('your_locator').press('backspace')

You can send the following keys

F1 – F12, Digit0– Digit9, KeyA– KeyZ, Backquote, Minus, Equal, Backslash, Backspace, Tab, Delete, Escape, ArrowDown, End, Enter, Home, Insert, PageDown, PageUp, ArrowRight, ArrowUp,

• How can you emulate different devices (e.g., mobile, tablet) using Playwright?

To emulate different devices, such as mobile or tablet, using Playwright, choose from a list of pre-defined mobiles and tablet list using the playwright.devices and then use it.

The list of devices is very exhaustive. and can be found here – list of devices.

To emulate different devices, such as mobile or tablet, using Playwright, you can also use the emulate() method provided by the Playwright API. This method allows you to simulate various device characteristics, including screen size, user agent, and more.

By using the context.emulate() method with different options, you can emulate various devices and test your web application’s responsiveness and behavior on different screen sizes and devices.

• How do you perform file uploads using Playwright?

You can select input files for upload using the locator.setInputFiles() method. It expects first argument to point to an input element with the type "file". Multiple files can be passed in the array. 

I’ve written a full post on the file upload scenario – this also includes those scenarios where there is no input element for file uploads.

• How can you simulate mouse movements and perform mouse actions (e.g., hovering) using Playwright?

Ans: To simulate mouse movements and perform mouse actions like hovering using Playwright, you can utilize the mouse class provided by the Playwright API.

The Mouse class operates in main-frame CSS pixels relative to the top-left corner of the viewport.

Every page object has its own Mouse, accessible with page.mouse.

Mouse class provides a host of methods like click, dblclick, move etc. You can refer to the documentation here.

To simulate hovering on an element, you can use hover() method to achieve this

• How do you handle iframes in Playwright?

Ans : You can use the framelocator class when dealing with iframe in Playwright.

To handle nested iframes, you can use frameLocator.frameLocator(selector);

This page has some good code examples for iframes in Playwright

• How can you retrieve the text content of an element using Playwright?

Ans: You can use the locator.textContent() method for this purpose

• How can I define timeouts for an action in Playwright?

Ans: I recently published a detailed explanation on what are the different timeouts in Playwright. You can refer to this link for this complete explanation.

tl:dr;

Use the actionTimeout either in the playwright.config.ts file or have it locally done for each action.

• How can you write and execute Playwright tests in headless mode?

Ans: You can either define in the use section of playwright.config.ts file to have all tests run in headless

Or, you can define in the single test like this

• Get all href links in a web page using Playwright.

Ans : You can use the locator.all to get all the a tag in an array and then get the href attribute for all of them

• How to do a multiple select in drop down in Playwright

Ans : You can use the selectOption method and pass an array of values.

• How to check a checkbox and validate that it is checked?

Ans: You can use the locator.check() method to check a checkbox. This method can be used with input[type=checkbox], input[type=radio] and [role=checkbox] elements.

To validate a checkbox is checked, you can use locator.setChecked() method.

In the above set of questions, I have tried to include questions that related to basic e2e test operations – like select from drop down, selecting from checkbox etc.

In the next series, I will try to get questions on the various configuration options available in the playwright.config.ts file .