# 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();
}

```
