如何通过定位器截取屏幕截图，然后使用带有 webdriverio 的 appium 与其他定位器进行比较

Question

如何使用带有 webdriverio 的 appium 通过定位器截取屏幕截图，然后与另一个定位器与屏幕截图进行比较（并比较这两个图像）。我试着查看教程，但找不到任何有用的东西

Answer 1

您可以使用 webdriver io 捕获元素的屏幕截图，如下所述

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

你可以在webdriver-io

的官方文档中看到更多

一旦您捕获了两个元素的屏幕截图，您就可以使用名为 wdio-image-comparison-service.

的 WebdriverIO V5 的视觉回归服务

安装： 使用以下命令在本地安装此模块以用作 (dev-) 依赖项：

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

可以找到有关如何安装 WebdriverIO 的说明 here。

用法：

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

配置： wdio-image-comparison-service 是一项服务，因此它可以用作普通服务。您可以在 wdio.conf.js 文件中使用以下内容进行设置：

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
        }], 
    ],
    // ...
};

正在编写测试来比较 2 个元素的屏幕截图：

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：请检查所有关于图像比较的详细信息here

如何通过定位器截取屏幕截图，然后使用带有 webdriverio 的 appium 与其他定位器进行比较

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

appium

webdriver-io