Methods

The following methods are added to the global WebdriverIO browser-object.

Save Methods

TIP

Only use the Save Methods when you don't want to compare screens, but only want to have an element-/screenshot.

saveElement

Saves an image of an element.

Usage

await browser.saveElement(
    // element
    await $('#element-selector'),
    // tag
    'your-reference',
    // saveElementOptions
    {
        // ...
    }
);

Support

• Desktop Browsers
• Mobile Browsers
• Mobile Hybrid Apps
• Mobile Native Apps

Parameters

• element:
  • Mandatory: Yes
  • Type: WebdriverIO Element
• tag:
  • Mandatory: Yes
  • Type: string
• saveElementOptions:
  • Mandatory: No
  • Type: an object of options, see Save Options

Output:

See the Test Output page.

saveScreen

Saves an image of a viewport.

Usage

await browser.saveScreen(
    // tag
    'your-reference',
    // saveScreenOptions
    {
        // ...
    }
);

Support

• Desktop Browsers
• Mobile Browsers
• Mobile Hybrid Apps
• Mobile Native Apps

Parameters

• tag:
  • Mandatory: Yes
  • Type: string
• saveScreenOptions:
  • Mandatory: No
  • Type: an object of options, see Save Options

Output:

See the Test Output page.

saveFullPageScreen

Usage

Saves an image of the complete screen.

await browser.saveFullPageScreen(
    // tag
    'your-reference',
    // saveFullPageScreenOptions
    {
        // ...
    }
);

Support

• Desktop Browsers
• Mobile Browsers

Parameters

• tag:
  • Mandatory: Yes
  • Type: string
• saveFullPageScreenOptions:
  • Mandatory: No
  • Type: an object of options, see Save Options

Output:

See the Test Output page.

saveTabbablePage

Saves an image of the complete screen with the tabbable lines and dots.

Usage

await browser.saveTabbablePage(
    // tag
    'your-reference',
    // saveTabbableOptions
    {
        // ...
    }
);

Support

• Desktop Browsers

Parameters

• tag:
  • Mandatory: Yes
  • Type: string
• saveTabbableOptions:
  • Mandatory: No
  • Type: an object of options, see Save Options

Output:

See the Test Output page.

Check Methods

TIP

When the check-methods are used for the first time you will see the below warning in the logs. This means you don't need to combine the save- and check-methods if you want to create your baseline.

#####################################################################################
 Baseline image not found, save the actual image manually to the baseline.
 The image can be found here:
 /Users/wswebcreation/project/.tmp/actual/desktop_chrome/examplePage-chrome-latest-1366x768.png
 If you want the module to auto save a non existing image to the baseline you
 can provide 'autoSaveBaseline: true' to the options.
#####################################################################################

checkElement

Compare an image of an element against a baseline image.

Usage

await browser.checkElement(
    // element
    '#element-selector',
    // tag
    'your-reference',
    // checkElementOptions
    {
        // ...
    }
);

Support

• Desktop Browsers
• Mobile Browsers
• Mobile Hybrid Apps
• Mobile Native Apps

Parameters

• element:
  • Mandatory: Yes
  • Type: WebdriverIO Element
• tag:
  • Mandatory: Yes
  • Type: string
• checkElementOptions:
  • Mandatory: No
  • Type: an object of options, see Compare/Check Options

Output:

See the Test Output page.

checkScreen

Compares an image of a viewport against a baseline image.

Usage

await browser.checkScreen(
    // tag
    'your-reference',
    // checkScreenOptions
    {
        // ...
    }
);

Support

• Desktop Browsers
• Mobile Browsers
• Mobile Hybrid Apps
• Mobile Native Apps

Parameters

• tag:
  • Mandatory: Yes
  • Type: string
• checkScreenOptions:
  • Mandatory: No
  • Type: an object of options, see Compare/Check Options

Output:

See the Test Output page.

checkFullPageScreen

Compares an image of the complete screen against a baseline image.

Usage

await browser.checkFullPageScreen(
    // tag
    'your-reference',
    // checkFullPageOptions
    {
        // ...
    }
);

Support

• Desktop Browsers
• Mobile Browsers

Parameters

• tag:
  • Mandatory: Yes
  • Type: string
• checkFullPageOptions:
  • Mandatory: No
  • Type: an object of options, see Compare/Check Options

Output:

See the Test Output page.

checkTabbablePage

Compares an image of the complete screen with the tabbable lines and dots against a baseline image.

Usage

await browser.checkTabbablePage(
    // tag
    'your-reference',
    // checkTabbableOptions
    {
        // ...
    }
);

Support

• Desktop Browsers

Parameters

• tag:
  • Mandatory: Yes
  • Type: string
• checkTabbableOptions:
  • Mandatory: No
  • Type: an object of options, see Compare/Check Options

Output:

See the Test Output page.