> For the complete documentation index, see [llms.txt](https://testingvn.gitbook.io/playwright/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://testingvn.gitbook.io/playwright/playwright-locator-elements/page.usdusd-and-page.usd-in-playwright.md).

# page.$$ and page.$ in Playwright

> <mark style="color:red;">**Discouraged (This function is deprecated)**</mark>
>
> :warning: <mark style="color:red;">**Use locator-based**</mark> [<mark style="color:red;">**page.locator()**</mark>](https://playwright.dev/docs/api/class-page#page-locator) <mark style="color:red;">**instead. Read more about**</mark> [<mark style="color:red;">**locators**</mark>](https://playwright.dev/docs/locators)**.**

*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.

```typescript
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.

```typescript
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:

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

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

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

```