WebdriverIO - Capturing Screenshots

We can capture screenshots while working on automation tests developed in WebdriverIO using the saveScreenshot method. A screenshot is generally captured if we encounter an application error. An Assertion has failed, and so on.

Syntax

The syntax for capturing screenshots is as follows −

browser.saveScreenshot("name along with path to store screenshot")

Here, the name along with the path where the screenshot is to be saved is passed as a parameter to the method. In the WebdriverIO, we don't have the option to capture a screenshot for a particular element.

To begin, follow Steps 1 to 5 from the Chapter titled Happy path flow with WebdriverIO which are as follows −

Step 1 − Install NodeJS. The details on how to perform this installation are given in detail in the Chapter titled Getting Started with NodeJS.

Step 2 − Install NPM. The details on how to perform this installation are given in detail in the Chapter titled Installation of NPM.

Step 3 − Install VS Code. The details on how to perform this installation are given in detail in the Chapter titled VS Code Installation.

Step 4 − Create the Configuration file. The details on how to perform this installation are given in detail in the Chapter titled Configuration File generation.

Step 5 − Create a spec file. The details on how to perform this installation are given in the Chapter titled Mocha Installation.

Step 6 − Add the below code within the Mocha spec file created.

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Screenshot', function(){    
      // launch url
      browser.url('https://www.tutorialspoint.com/index.htm')  
      //identify element then enter text
      const e = $("#gsc-i-id1")
      e.setValue('WebdriverIO')
      //capture screenshot of page
      browser.saveScreenshot("screenshot.png")
   });
});

Run the Configuration file - wdio.conf.js file with the following command −

npx wdio run wdio.conf.js 

The details on how to create a Configuration file are discussed in detail in the Chapter titled Wdio.conf.js file and Chapter titled Configuration File generation. The following screen will appear on your computer −

After the command has been executed successfully, a file named screenshot.png gets generated within the project folder. It contains the captured screenshot of the page.