# Playwright VisualTest Plugin

### Documentation

Click [here](https://support.smartbear.com/visualtest/docs/en/software-development-kits--sdks-/playwright-javascript-sdk.html) for more detailed docs on SmartBear's website

## Setup

```shell
npm install @smartbear/visualtest-playwright --save-dev
npx visualtest-setup
```
Enter your projectToken in the newly created ```visualTest.config.js``` file:

```javascript
module.exports = {projectToken: 'PROJECT_TOKEN'}
```

****

# Implementation
```javascript
import {sbvtCapture, sbvtGetTestRunResult, sbvtPrintReport} from "@smartbear/visualtest-playwright";
import {expect, test} from "@playwright/test";

test(`should visit Playwright example page, then take sbvtCaptures`, async ({page}) => {
    await page.goto('https://playwright.dev/')
    await sbvtCapture(page, 'Playwright Example Page')
    await sbvtCapture(page, 'element', {
        elementCapture: ".hero"
    });
    await sbvtCapture(page, 'Homepage viewport', {
        viewport: true
    })

    await sbvtPrintReport(); //print out the results of the comparison 

    const sbvtReport = await sbvtGetTestRunResult();
    expect(sbvtReport.failed).toEqual(0); //assert for no comparison differences
})
```
### lazyload fullpage capture
```javascript
test('test taking an element sbvt capture', async ({page}) => {
    await page.goto('https://smartbear.github.io/visual-testing-example-website/Example4/Original/index.html');
    await sbvtCapture(page, 'fullpage-capture',
        {
            lazyload: 250,
        });
});
```
### viewport capture
```javascript
test('take a viewport snapshot', async ({page}) => {
    await page.goto('https://smartbear.com');
    await sbvtCapture(page, 'sb-viewport', {
        viewport: true
    });
});
```
### element capture
```javascript
test('take an element sbvt capture', async ({page}) => {
    await page.goto('https://smartbear.github.io/visual-testing-example-website/Example4/Original/index.html');
    await sbvtCapture(page, 'element-hero-content-capture', {
        elementCapture: ".ud-hero-content"
    });
});
```
### ignore element capture
```javascript
test('ignore element sbvt capture', async ({page}) => {
    await page.goto('https://smartbear.github.io/visual-testing-example-website/Example4/Original/index.html');
    await sbvtCapture(page, 'element-hero-content-capture', {
        ignoreElements: [".ud-hero-content"], //input CSS selectors as an array
        lazyload: 250
    });
});
```
### layout mode capture
```javascript
test('layout mode comparison', async ({page}) => {
    await page.goto('https://smartbear.github.io/visual-testing-example-website/Example4/Original/index.html');
    await sbvtCapture(page, 'layout-mode', {
        comparisonMode: 'layout',
        sensitivity: 'low', // 'medium', or 'high'
    });
});
```
## sbvtPrintReport & sbvtGetTestRunResult
```javascript
test('test taking an element sbvt capture', async ({page}) => {
    await page.goto('https://smartbear.github.io/visual-testing-example-website/Example4/Original/index.html');
    await sbvtCapture(page, 'fullpage-capture', {
        lazyload: 250,
    });
    const testRunResults = await sbvtGetTestRunResult() //testRunResults will have the pass/fail data on it incase you want to fail the run on a comparison failure
    await sbvtPrintReport() // prints the comparison data for the test run
});
```

## File Testing
```javascript
test('test creating a pdf and then checking the a key value pair', async ({page}) => {
    await page.goto('https://smartbear.github.io/visual-testing-example-website/Example4/Original/index.html');
    const pdf = await page.pdf();
    const pdfKeyValuePairs = (await sbvtSendFile(pdf, 'file-name'))
    console.log('KVPs: ',pdfKeyValuePairs);
    expect(pdfKeyValuePairs["New User"]).toEqual('34567');
});
```

## Assigning captures to a test group name 
```javascript   
//visualtest.config.js
module.exports = {
    projectToken: 'PROJECT_TOKEN',
    testGroupName: 'test group name'
}
// OR save on the environment variable 
// SBVT_TEST_GROUP_NAME = 'test group name'
```


# Grouping Playwright workers together under one test run
Each worker process does not communicate with the other workers, this causes separate testRuns and makes grouping all the images into one testRun tough. To alleviate this, add the below line to your ```playwright.config``` file 

```typescript
//playwright.config
module.exports = defineConfig({
    globalSetup: '@smartbear/visualtest-playwright',
    // rest of your configurations  
});
```

## Assigning SCM data to a test run

Save Source Control Manager data on the environment variable
```bash
SBVT_SCM_BRANCH=branch-name 
SBVT_SCM_COMMIT_ID=commit-hash
```