website/docs/visual-testing/methods.md
The following methods are added to the global WebdriverIO browser-object.
:::info TIP Only use the Save Methods when you don't want to compare screens, but only want to have an element-/screenshot. :::
saveElementSaves an image of an element.
await browser.saveElement(
// element
await $('#element-selector'),
// tag
'your-reference',
// saveElementOptions
{
// ...
}
);
element:
tag:
saveElementOptions:
See the Test Output page.
saveScreenSaves an image of a viewport.
await browser.saveScreen(
// tag
'your-reference',
// saveScreenOptions
{
// ...
}
);
tag:
saveScreenOptions:
See the Test Output page.
saveFullPageScreenSaves an image of the complete screen.
await browser.saveFullPageScreen(
// tag
'your-reference',
// saveFullPageScreenOptions
{
// ...
}
);
tag:
saveFullPageScreenOptions:
See the Test Output page.
saveTabbablePageSaves an image of the complete screen with the tabbable lines and dots.
await browser.saveTabbablePage(
// tag
'your-reference',
// saveTabbableOptions
{
// ...
}
);
tag:
saveTabbableOptions:
See the Test Output page.
:::info 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.
#####################################################################################
:::
checkElementCompare an image of an element against a baseline image.
await browser.checkElement(
// element
'#element-selector',
// tag
'your-reference',
// checkElementOptions
{
// ...
}
);
element:
tag:
checkElementOptions:
See the Test Output page.
checkScreenCompares an image of a viewport against a baseline image.
await browser.checkScreen(
// tag
'your-reference',
// checkScreenOptions
{
// ...
}
);
tag:
checkScreenOptions:
See the Test Output page.
checkFullPageScreenCompares an image of the complete screen against a baseline image.
await browser.checkFullPageScreen(
// tag
'your-reference',
// checkFullPageOptions
{
// ...
}
);
tag:
checkFullPageOptions:
See the Test Output page.
checkTabbablePageCompares an image of the complete screen with the tabbable lines and dots against a baseline image.
await browser.checkTabbablePage(
// tag
'your-reference',
// checkTabbableOptions
{
// ...
}
);
tag:
checkTabbableOptions:
See the Test Output page.