---
id: test-output
title: Test Output
---
:::info
[This WebdriverIO](https://guinea-pig.webdriver.io/image-compare.html) demo site has been used for the example image output.
:::
## `enableLayoutTesting`
This can be set on the [Service Options](./service-options#enablelayouttesting) as well as on the [Method](./method-options) level.
```js
// wdio.conf.(js|ts)
export const config = {
// ...
// =====
// Setup
// =====
services: [
[
'visual',
{
enableLayoutTesting: true
}
]
]
// ...
}
```
The image output for the [Service Options](./service-options#enablelayouttesting) is equal to the [Method](./method-options), see below.
### Image Output
```js
await browser.saveElement(".features_vqN4", "example-element-tag", {enableLayoutTesting: true})
// Or
await browser.checkElement(".features_vqN4", "example-element-tag", {enableLayoutTesting: true})
```
```js
await browser.saveScreen("example-page-tag")
```
```js
await browser.saveFullPageScreen("full-page-tag")
// Or
await browser.checkFullPageScreen("full-page-tag", {enableLayoutTesting: true})
```
```js
await browser.saveTabbablePage("tabbable-page-tag")
// Or
await browser.checkTabbablePage("tabbable-page-tag", {enableLayoutTesting: true})
```
## save(Screen/Element/FullPageScreen)
### Console Output
The `save(Screen/Element/FullPageScreen)` methods will provide the following information after the method has been executed:
```js
const saveResult = await browser.saveFullPageScreen({ ... })
console.log(saveResults)
/**
* {
* // The device pixel ratio of the instance that has run
* devicePixelRatio: 1,
* // The formatted filename, this depends on the options `formatImageName`
* fileName: "examplePage-chrome-latest-1366x768.png",
* // The path where the actual screenshot file can be found
* path: "/path/to/project/.tmp/actual/desktop_chrome",
* };
*/
```
### Image Output
```js
await browser.saveElement(".hero__title-logo", "example-element-tag")
```
```js
await browser.saveScreen("example-page-tag")
```
:::info TIP
iOS `saveScreen` executions are by default not with the device bezel corners. To have this please add the `addIOSBezelCorners:true` option when instantiating the service, see [this](./service-options#addiosbezelcorners)
:::
```js
await browser.saveFullPageScreen("full-page-tag")
```
## check(Screen/Element/FullPageScreen)
### Console Output
By default, the `check(Screen/Element/FullPageScreen)` methods will only provide a mismatch percentage like `1.23`, but when the plugin has the option `returnAllCompareData: true` the following information is provided after the method has been executed:
```js
const checkResult = await browser.checkFullPageScreen({ ... })
console.log(checkResult)
/**
* {
* // The formatted filename, this depends on the options `formatImageName`
* fileName: "examplePage-chrome-headless-latest-1366x768.png",
* folders: {
* // The actual folder and the file name
* actual: "/path/to/project/.tmp/actual/desktop_chrome/examplePage-chrome-headless-latest-1366x768.png",
* // The baseline folder and the file name
* baseline:
* "/path/to/project/localBaseline/desktop_chrome/examplePage-chrome-headless-latest-1366x768.png",
* // This following folder is optional and only if there is a mismatch
* // The folder that holds the diffs and the file name
* diff: "/path/to/project/.tmp/diff/desktop_chrome/examplePage-chrome-headless-latest-1366x768.png",
* },
* // The mismatch percentage
* misMatchPercentage: 2.34,
* };
*/
```
### Image Output
:::info
The images below will only show differences as a result of running the check commands. Only the diff in a browser is shown, but the output for Android and iOS is the same.
:::
```js
await browser.checkElement("#__docusaurus_skipToContent_fallback > header > div > div.buttons_pzbO > a:nth-child(1)", "example-element-tag")
```
:::info
The button text has been changed from `Get Started` to `Getting Started!` and detected as a change.
:::
```js
await browser.checkScreen("example-page-tag")
```
:::info
The button text has been changed from `Get Started` to `Getting Started!` and detected as a change.
:::
```js
await browser.checkFullPageScreen("full-page-tag")
```
:::info
The button text has been changed from `Get Started` to `Getting Started!` and detected as a change.
:::
## Block-Outs
Here you will find an example output for block-outs in Android NativeWebScreenshot and iOS where the status+address and toolbar are blocked out.
