# Getting Started

You can follow along with the installation steps below to start a new project, or you can clone the [example project here.](https://github.com/appetizeio/appetize-js-sdk-examples/tree/main/playwright-testing)

## Installation

Get started by installing Playwright with Appetize using **npm:**

```sh
npm init @appetize/playwright@latest
```

Run the install command and select the following to get started:

* Your Appetize App's [**buildId**](#user-content-fn-1)[^1]
* The **preferred default device**

<figure><img src="https://lh7-us.googleusercontent.com/slidesz/AGV_vUdOgTMhY5_mOGlIO1bM1w1FNQjzN7R9tfbQ8ItN0DnHyeVeA-8b94lKG71uxzWDcOZwnDf5tpGP8TpfS_lGwVgNACY3eXtKx4Ku0XhW61hoMbQXc8QvUmoexW21LJRtwCcNguKCcfeZgoqc9XLOIzYfQTYWzKox=nw?key=Ov-qIhkbe_J50OTU5jQN9g" alt="" width="563"><figcaption></figcaption></figure>

## What's Installed <a href="#whats-installed" id="whats-installed"></a>

* A Playwright project will be created (see [Playwright documentation](https://playwright.dev/docs/intro#installing-playwright)).
* The `@appetize/playwright` npm package will be installed.
* The `playwright.config.ts` file will be configured for Appetize with the specified values for the default device and app.

{% hint style="info" %}
See [Test Configuration](/testing/test-configuration.md) for more advanced configurations.
{% endhint %}

* An example test file, `app.spec.ts`, will be added.

## Usage

Update the `app.spec.ts` file in your tests folder to include a test relevant to your application

```javascript
import { test, expect } from '@appetize/playwright'

test('example test', async ({ session }) => {
    await expect(session).toHaveElement({
         attributes: {
          // replace with the text of an element that appears on your app
            text: 'Hello world' 
        }
    })
})
```

Once you've updated the test file for your app, run the test with:

```bash
npx playwright test --headed

# or, headlessly

npx playwright test
```

## Next Steps

{% content-ref url="/pages/X4MFBApmCt8df6lU86N8" %}
[Writing Tests](/testing/writing-tests.md)
{% endcontent-ref %}

{% content-ref url="/pages/3e8Dq2Byt8xkm8Hi1H6k" %}
[Test Configuration](/testing/test-configuration.md)
{% endcontent-ref %}

[^1]: previously known as **publicKey**


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.appetize.io/testing/getting-started.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.