Basic Interactions

• Clicking: Use page.click(selector) to click an element. If the element is not visible, Playwright waits until it becomes clickable.

await page.click('button#submit');

• Typing: Use page.fill(selector, value) to fill input fields with text. This clears the field first and then types.

await page.fill('input[name="email"]', 'user@example.com');

page.selectOption(selector, value) to select an option from a dropdown.

await page.selectOption('select#countries', 'US');

Advanced Interactions

Dealing with Frames: To interact with elements inside an iframe, first get the frame using page.frame(nameOrId) and then perform actions within this frame.

const frame = page.frame('frame-id');
await frame.click('button#inside-frame');

Dragging Elements: Playwright supports dragging elements using page.mouse.move(), page.mouse.down(), and page.mouse.up() methods.

await page.mouse.move(startX, startY);
await page.mouse.down();
await page.mouse.move(endX, endY);
await page.mouse.up();

Executing JavaScript: Execute custom JavaScript on the page with page.evaluate(). This is useful for interactions that are not directly supported by the API.

await page.evaluate(() => document.querySelector('button#hidden').click());

Task:

Create a playwright project for yourself and make sure that you can do click, type and select an elementt