how to take a screenshot by a locator and then compare with the other locator with the screenshot using appium with webdriverio

Question

how to take a screenshot by a locator and then compare with the other locator with the screenshot(and compare those two images) using appium with webdriverio. I tried looking at a tutorial but not able to find anything that works

Answer 1

You can capture screenshot of an element with webdriver io as mentioned below

it('should save a screenshot of the browser view', function () {
    const elem = $('#someElem');
    elem.saveScreenshot('./some/path/elemScreenshot.png');
});

you can see more about in on official documentation of webdriver-io

Once you capture screenshot for both element then you can use Visual Regression service for WebdriverIO V5 called wdio-image-comparison-service.

Installation: Install this module locally with the following command to be used as a (dev-)dependency:

npm install --save-dev wdio-image-comparison-service

Instructions on how to install WebdriverIO can be found here.

Usage:

wdio-image-comparison-service supports NodeJS 8 or higher

Configuration: wdio-image-comparison-service is a service so it can be used as a normal service. You can set it up in your wdio.conf.js file with the following:

const { join } = require('path');

// wdio.conf.js
exports.config = {
    // ...
    // =====
    // Setup
    // =====
    services: [ 
        ['image-comparison', 
        // The options
        {
            // Some options, see the docs for more
            baselineFolder: join(process.cwd(), './tests/sauceLabsBaseline/'),
            formatImageName: '{tag}-{logName}-{width}x{height}',
            screenshotPath: join(process.cwd(), '.tmp/'),
            savePerInstance: true,
            autoSaveBaseline: true,
            blockOutStatusBar: true,
            blockOutToolBar: true,
            // ... more options
        }], 
    ],
    // ...
};

Writing tests to compare screenshot of 2 elements:

describe('Example', () => {
  beforeEach(() => {
     browser.url('https://webdriver.io');
  });



  it('should save some screenshots', () => {

    // Save an element
    browser.saveElement($('#element-id'), 'firstButtonElement', { /* some options*/ });

  });



  it('should compare successful with a baseline', () => {

    // Check an element
    expect(browser.checkElement($('#element-id'), 'firstButtonElement', { /* some options*/ })).toEqual(0);

  });
});

Referenec: Please check all details about image comparison here