> ## Documentation Index
> Fetch the complete documentation index at: https://docs.synpress.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Playwright

Integrating Synpress into Playwright is quite straightforward.

Let's digest a simple test step by step:

```typescript example.spec.ts theme={null}
import { testWithSynpress } from '@synthetixio/synpress'
import { MetaMask, metaMaskFixtures } from '@synthetixio/synpress/playwright'
import basicSetup from '../wallet-setup/basic.setup'

// Create a test instance with Synpress and MetaMask fixtures
const test = testWithSynpress(metaMaskFixtures(basicSetup))

const { expect } = test

test('should connect wallet to the MetaMask Test Dapp', async ({
  context,
  page,
  metamaskPage,
  extensionId,
}) => {
  // Create a new MetaMask instance
  const metamask = new MetaMask(
    context,
    metamaskPage,
    basicSetup.walletPassword,
    extensionId
  )

  // Navigate to the homepage
  await page.goto('/')

  // Click the connect button
  await page.locator('#connectButton').click()

  // Connect MetaMask to the dapp
  await metamask.connectToDapp()

  // Verify the connected account address
  await expect(page.locator('#accounts')).toHaveText(
    '0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266'
  )
})
```

## Import

First, you need to import the necessary modules and setup:

```typescript theme={null}
import { testWithSynpress } from '@synthetixio/synpress'
import { MetaMask, metaMaskFixtures } from '@synthetixio/synpress/playwright'
import basicSetup from '../wallet-setup/basic.setup'

const test = testWithSynpress(metaMaskFixtures(basicSetup))
```

The `testWithSynpress` function takes the MetaMask fixtures as an argument, which includes your wallet setup configuration. This setup defines how your wallet should be configured before each test.

## Define your test

Now that you have your test instance configured, you can write your test:

```typescript theme={null}
const { expect } = test

test('should connect wallet to the MetaMask Test Dapp', async ({
  context,
  page,
  metamaskPage,
  extensionId,
}) => {
  // Create a new MetaMask instance
  const metamask = new MetaMask(
    context,
    metamaskPage,
    basicSetup.walletPassword,
    extensionId
  )

  // Navigate to the homepage
  await page.goto('/')

  // Click the connect button
  await page.locator('#connectButton').click()

  // Connect MetaMask to the dapp
  await metamask.connectToDapp()

  // Verify the connected account address
  await expect(page.locator('#accounts')).toHaveText(
    '0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266'
  )
})
```

The test uses several fixtures provided by Synpress:

* `context`: Playwright browser context
* `page`: The page where your dApp is running
* `metamaskPage`: The MetaMask extension page
* `extensionId`: The ID of the MetaMask extension

You can learn more about them in the [Built-in Fixtures](./fixtures) section.

To interact with MetaMask, create an instance of the `MetaMask` class. For detailed information about the constructor and available methods, see the [MetaMask API reference](../../api-reference/playwright/classes/MetaMask).

<Tip>
  If you're using the same wallet setup in multiple test files, you can speed up the process of writing your tests by defining a custom fixture that will create the `MetaMask` instance for you.

  <Expandable title="details">
    <ResponseField name="Steps">
      1. Create a custom fixture file that extends `testWithSynpress`
      2. Use this fixture in your test files
    </ResponseField>

    <ResponseField name="Code">
      <CodeGroup>
        ```typescript testWithMetaMask.ts theme={null}
        import { testWithSynpress } from '@synthetixio/synpress'
        import { MetaMask, metaMaskFixtures } from '@synthetixio/synpress/playwright'
        import connectedSetup from './wallet-setup/connected.setup'

        export const testWithMetaMask = testWithSynpress(metaMaskFixtures(connectedSetup)).extend<{
          metamask: MetaMask
        }>({
          metamask: async ({ context, metamaskPage, extensionId }, use) => {
            const metamask = new MetaMask(
              context,
              metamaskPage,
              connectedSetup.walletPassword,
              extensionId
            )
            await use(metamask)
          },
        })
        ```

        ```typescript example.spec.ts theme={null}
        import { testWithMetaMask as test } from './testWithMetaMask'

        const { expect } = test

        test('should connect wallet to dApp', async ({ context, page, extensionId, metamask }) => {
          await page.goto('/')
          await page.locator('#connectButton').click()
          await metamask.connectToDapp()
          await expect(page.locator('#accounts')).toHaveText('0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266')
        })
        ```

        ```typescript multiple-accounts.spec.ts theme={null}
        import { testWithMetaMask as test } from './testWithMetaMask'

        const { expect } = test

        test('should connect multiple accounts', async ({ context, page, extensionId, metamask }) => {
          await page.goto('/')
          await page.locator('#connectButton').click()
          await metamask.connectToDapp(['0xaccount1', '0xaccount2'])
          await expect(page.locator('#accounts')).toHaveText('0xaccount1,0xaccount2')
        })
        ```
      </CodeGroup>
    </ResponseField>
  </Expandable>
</Tip>

## Running Tests

To run your tests:

```bash theme={null}
npx playwright test
```

<Warning>
  Currently, Synpress runs tests in headed mode by default (like `playwright test --headed`).
  To run in headless mode, set the `HEADLESS` environment variable:

  ```bash theme={null}
  HEADLESS=true npx playwright test
  ```

  This default behavior will be changed in a future release to match Playwright's standard behavior.
</Warning>

<Tip>
  Synpress supports all Playwright features, including:

  * [Parallel test execution](https://playwright.dev/docs/test-parallel)
  * [UI Mode](https://playwright.dev/docs/test-ui-mode)
  * [Test retries](https://playwright.dev/docs/test-retries)
  * [Fixtures](https://playwright.dev/docs/test-fixtures)
</Tip>