Is there any programmatic workaround to perform chain of actions on selectors in playwright?

Question

According to the official documentation, the playwright doesn't support chaining the actions you perform on a single selector like, alternatively, Cypress allows for. As a result, your code file grows with repetitive expressions:

await page.getByRole('textbox').click();
await page.getByRole('textbox').fill('test value in the text box');
await page.getByRole('textbox').press('Enter');

What I'm trying to achieve: is that after you perform a click, you can perform a fill and maybe a press, if it's programmatically possible, in a single expression. Without repeating await page.getByRole('textbox')

I'm relatively new to javascript and typescript. I'm reading the documentation but feeling overwhelmed. I would be grateful for any guidance concerning if, e.g., promises would solve this issue, with an example on the above code provided.

Using "@playwright/test": "^1.28.0"

Answer 1

You can simplify your code by moving the Locator to a variable and reuse that. So something like this:

const myTextbox = page.getByRole('textbox');
await myTextbox.click();
await myTextbox.fill('some text');
await myTextbox.press('Enter');

Not sure what your Use Case is but by using fill you can usually already skip the click beforehand. Not even sure if you need the enter there for it to work.

I do not think it is possible to chain all those actions without making it overly complicated or hard to read.