Actions in playwright
Performing an action using Playwright involves several steps, the first of which is locating the element you want to interact with. Once you have found the element, Playwright will wait for it to be in a state where it can be interacted with before performing the desired action. This ensures that the element is fully loaded and ready to receive input, which helps prevent errors and ensures a smoother user experience.
Navigation
await page.goto('https://playwright.dev/');Playwright ensures test reliability by waiting for the page to fully load, preventing flaky tests and ensuring accuracy and consistency. It also enables navigation to specific URLs, elements, and frames for greater control and flexibility in application testing.
Interactions
await page.getByRole('checkbox').check();
await page.getByRole('checkbox').uncheck();Check if the element is a checkbox or radio input. Scroll the element into view if necessary. If the element is already checked, the method returns immediately. Verify that the element is now checked or throws an error. Similarly, the “uncheck” method is also available.
await page.getByRole('button').click();This function clicks an element by checking if it is clickable, scrolling it into view, and then clicking its centre. It also waits for any navigations to complete.
await page.getByRole('link').hover();When hovering over an element, this function waits for the element to become actionable. scrolling it into view and hovering over its centre. It also waits for any initiated navigations to either succeed or fail.
await page.getByRole('textbox').fill('example value');This method waits for actionability checks, focuses on the element, fills it, and triggers an input event after filling. Note that you can pass an empty string to clear the input field. If the target element is not an <input>, <textarea>, or [contenteditable] element, this method throws an error.
The getByRole() method uses the ARIA role attribute to find elements. This attribute specifies the role of an element on the page and is an accessibility attribute. Therefore, getByRole() is used to find elements that are vital for accessibility, such as buttons, form fields, and headers.
await locator.focus();calls focus on the matching element.
await page.getByRole('textbox').press('Backspace');Focus on the matching element and press a key or combination of keys. Modification shortcuts are also supported.
await page.getByLabel('Upload files').setInputFiles(['file1.txt', 'file2.txt']);Sets the file input value to the specified file paths or files. Relative file paths are resolved from the current working directory. To clear selected files, pass in an empty array. A Locator is required to point to an input element.
As the name suggests, getByLabel() uses the label element to find elements. The label element is used to associate a label with an input field or other form control. This makes getByLabel() a good choice for finding form fields, especially when the label text is unique.
element.selectOption('blue');The method selects specified options in an <select> element based on values, labels, or indexes. It throws an error if the target element is not an <select> element. It returns an array of selected option values.
await element.type('World', {delay: 100});This function focuses on an element and then sends an event for each character in the text.
The Playwright's methods page.fill() and page.type() both enter text into an input field, but there are differences:
page.fill()is preferred for filling out form fields, as it focuses the element, triggers an input event, and performs validation.page.type()is lower-level, simply typing the text into the input field without focusing or triggering events. This can be useful for testing auto-submitting forms or controlling event timing.
I use page.type() when the input is a predictive search type, and page.fill() for all other input types.
My recent publication compiled a comprehensive collection of 100 similar typescript programs. Each program not only elucidates essential Typescript concepts and expounds upon the significance of test automation but also provides practical guidance on its implementation using Playwright. This resource will undoubtedly be valuable if you look deeper into similar topics.
