Getting Started

You can follow along with the installation steps below to start a new project, or you can clone the example project here.​
Installation
Create a new Playwright project (see Playwright documentation)
npm init playwright@latest
Then install @appetize/playwright
npm install @appetize/playwright
Playwright Config
You will need to update playwright.config.ts so that it's configured for Appetize. Update it to the following:
const config = {
    testDir: './tests',
    outputDir: 'test-results/',
    timeout: 120 * 1000,
    expect: {        
        // recommended ratio for screenshot testing
        toMatchSnapshot: {
            maxDiffPixelRatio: 0.05,
        }
    },
    forbidOnly: !!process.env.CI,
    retries: process.env.CI ? 3 : 0,
    reporter: 'line',
    
    // correlates to number of concurrent Appetize sessions at a time
    workers: 1,
    fullyParallel: false,
    
    use: {    
        trace: 'retain-on-failure',
        baseURL: 'https://appetize.io',
        
        // Appetize session configuration
        config: {
            device: 'iphone14pro',
            publicKey: '<PUBLIC KEY>'
        }    
    },
}
​
export default config;
See Test Configuration for more advanced configurations.
Usage
Delete the example test files that Playwright made when you generated the project and instead create an app.spec.ts file in your tests folder with the following contents:
import { test, expect } from '@appetize/playwright'
​
test('loads the home screen', async ({ session }) => {
    await expect(session).toHaveElement({
        // replace with text of element that appears on your app
        text: 'Welcome',
    })
})
Once you've updated the test file for your app, run the test with:
npx playwright test --headed
​
# or, headlessly
​
npx playwright test
​
Last modified 4mo ago