上一篇 - Macaca 输入文字和触发键盘事件

上一篇我们介绍了如何在网页中输入文字，本篇介绍下如何处理手势事件。大家都知道 Native 平台通过 Macaca 提供的 touch API 就可以解决。

在网页端，手势事件应用场景也非常多，尤其是在移动端，我们使用 touch 事件来替代以往 PC 时代的鼠标事件，你会发现在一些移动端网页上通过 .click() 方法点击已经不生效了。我们通过封装事件来实现触摸事件的触发。

示例 1

一个 React 实现的时间选择器，需要通过手指滑动进行选择。通过下面的用例不难发现，直接使用 macaca-wd 中提供的 helper 方法扩展就可以轻松实现了。elementTouch 可以用来触发手势事件，mouseEvent 可以用来触发鼠标事件，比如 PC 时代的 hover 行为等。更多 helper

// start 相当于 touchstart
.elementTouch(selector, {
  type: 'start'
})
// start 相当于 touchmove
.elementTouch(selector, {
  type: 'move',
  pageX: 40,
  pageY: 40,
})

那么滑动相当于连续执行 touchmove。如下示例中选择了 react-component 开源的 m-date-picker 进行演示。

'use strict';

import {
  webpackHelper,
} from 'macaca-wd';
import Promise from 'bluebird';

const {
  driver,
  BASE_URL,
} = webpackHelper;

const distUrl = 'https://react-component.github.io/m-date-picker/examples/popup.html';

describe('test', () => {

  describe('page func testing', () => {

    before(() => {
      return driver
        .initWindow({
          width: 375,
          height: 667,
          deviceScaleFactor: 2
        })
        .getUrl(distUrl);
    });

    afterEach(function () {
      return driver
        .coverage()
        .saveScreenshots(this);
    });

    after(() => {
      return driver
        .openReporter(false)
        .quit();
    });

    it('panel should be show', () => {
      const selector = 'div > div.rmc-picker-popup-wrap > div > div > div > div > div.rmc-date-picker > div:nth-child(1)';
      return driver
        .elementByCss('button')
        .click()
        .sleep(1000)
        .elementTouch(selector, {
          type: 'start'
        })
        .then(() => {
          let num = 30;
          return new Promise((resolve) => {
            const p = () => {
              num--;
              driver
                .elementTouch(selector, {
                  type: 'move',
                  pageX: 40,
                  pageY: 4 * num,
                })
                .then(() => {
                  if (!num) {
                    resolve();
                  } else {
                    p();
                  }
                });
            };
            p();
          });
        })
        .sleep(10000)
    });

  });

});

示例 2

示例 2 演示一个 Vue 构建的工程如何通过触发 touchstart 完成自动化测试。

试试截图上的示例？

$ git clone https://github.com/macacajs/debugger-board.git --depth=1
$ cd debugger-board
$ npm i
$ npm run dev:test
# 此时新开启一个terminal运行下面的命令
$ npm run test

欢迎讨论，互相学习。

微博: http://weibo.com/xudafeng
Github: https://github.com/xudafeng

下一篇 - Macaca Web 测试最佳实践