page.$$ and page.$ in Playwright

In Playwright, page.$$ and page.$ are methods used to query elements on a webpage, but they differ in how many elements they return:

page.$(selector):

1. This method is used to query for a single element that matches the given selector.
2. It returns the first element that matches the selector, or null if no elements match.

Example:

const element = await page.$('div#my-element');

In this example, page.$ will return the first div element with the id="my-element", or null if such an element doesn't exist.

page.$$(selector):

1. This method is used to query for all elements that match the given selector.
2. It returns an array of elements that match the selector, or an empty array if no elements match.

Example:

const elements = await page.$$('div.my-class');

In this example, page.$$ will return an array of all div elements with the class="my-class", or an empty array if no such elements exist.

Key Differences:

page.$ returns only a single element (the first match).

page.$$ returns an array of elements that match the selector.

Example Use Case:

1. If you want to click on the first element with a specific class:

const firstElement = await page.$('.clickable');
await firstElement.click();

2. If you want to click on all elements with a specific class:

const clickableElements = await page.$$('.clickable');
for (const element of clickableElements) {
    await element.click();
}