Learn basic automation with Playwright - with code

If you are yet to set up a playwright here is the post to know about the advantages of the playwright, and how to set up and run the first playwright script. (Click here to read). After setting up the playwright the first thing you must know is how to locate the elements? how to click on those elements, how to type in textbox, how to select from the dropdown, how to select the radio button or check box? If you know these, you can write scripts using the playwright. 

Locators and Actions in Playwright

if you are interested in the video tutorial on the same, please go through the below video and subscribe to our youtube channel. Here I have explained writing the first script with live code. 

How to find locators (Xpath) in the playwright?

In Playwright user can use page.locator() to get the locator. In locator you can pass Xpath or locator or CSS selector and perform the action on it.
For Example - 

await page.locator('xpath=//button') 

await page.locator('css=button').click();

there are default methods to get the elements like 

• page.getByRole() - to locate by explicit and implicit accessibility attributes.
• page.getByText() to locate by-text content. 
• page.getByLabel() to locate a form control by the associated label's text.
• page.getByPlaceholder() to locate an input by the placeholder. 
• page.getByAltText() to locate an element, usually an image, by its text alternative. 
• page.getByTitle() to locate an element by its title attribute. 
• page.getByTestId() to locate an element based on its data-tested attribute (other attributes can be configured).

From the above methods, the user can directly get the elements. For example for getByRole(), you need to provide a role like a button, textbox, div etc, and some unique parameter 

await page.getByRole('button', { name: 'Sign in' }).click(); Others are straightforward, As per name you just need to pass text, label, title, or testID.

How to click on the button in the playwright?

In Playwrite using page.click() one can click on the element. Click method provides functionality to use with different optional parameters such as which button you want to press, the default is left button. Also, you can provide detail about how many clicks you want to perform, and how much delay you want between mouse down and mouse up. 

const createAccount = '[data-testid="open-registration-form-button"]'

await page.locator(createAccount).click();

Shift-right-click at a specific position on a canvas:

await page.locator('canvas').click({

button: 'right',

modifiers: ['Shift'],

position: { x: 23, y: 32 },

});

How to Type in the TextBox using Playwright?

In the Playwright locator.fill() is used to type the inputs in the textbox. 

await page.getByLabel('First name').fill('Software testing');

If you need to type like a real keyboard, you can use locator.type() it will enter character by character.

How to Select from the Dropdown in the Playwright?

Using locator. slectOption() you can select any value. Also, you can pass multiple values to select more than one. 

await page.getByTitle('Day').selectOption('2');

await page.getByTitle('Month').selectOption('May');

await page.getByTitle('Year').selectOption('1991');

Similarly for focus we can use locator.focus() method. 

If you have any doubts or suggestions feel free to reach out on social media. Follow Us on Reddit, Facebook, and Twitter. Don't forget to subscribe to the channel -> Youtube channel. Thank You

All Playwright Tutorial Posts -

• Setup NodeJS playwright and run the first script
• Learn basic automation with Playwright - with code
• Expect and Auto-waits in Playwright
• How to debug the playwright script?