start

1.1 install

cd /path/project
yarn add cypress --dev

1.2 open

npx cypress open

1.3 run

npx cypress run

simple test

但我们把project set up 好了之后，开始写一个最简单的test case 并且保证该测试可以运行起来。

describe('bing search', () => {
    it('should work', () => {
      cy.visit('https://cn.bing.com/');
      cy.get('#sb_form_q')
      .type('Hello world')
      .type('{enter}')
      .get('#b_content')
      .contains('Hello world')
    });
});

该用例描述的是打开bing然后输入Hello world，查找，查找的结果需要包含Hello world。在该例子中在feature文件中将元素也写在这里，接下来了解下Automation中常见的一种设计PO.

PO

关于PO，可以看这篇

pages

import * as Ids from '../../app/constants';

class LoginPage {
  visit() {
    cy.visit('https://test-th97479.slack.com/');
  }

  get EmailAddr() {
    return cy.get(`#${Ids.emailAddr}`);
  }

  get Password() {
    return cy.get(`#${Ids.password}`);
  }

  fillEmail(value: string){
    const field = cy.get(`#${Ids.emailAddr}`);
    field.clear();
    field.type(value);
    return this;
  }

  fillPassword(value: string){
    const field = cy.get(`#${Ids.password}`);
    field.clear();
    field.type(value);
    return this;
  }
  submit() {
    const button = cy.get(`#${Ids.login}`);
    button.click();
  }
}
export const loginPage = new LoginPage();

features.ts

import {loginPage} from './pages/loginPage';
describe('page object', () => {
    it('should work', () => {
    loginPage.visit();
    loginPage.fillEmail('summer.gan')
    loginPage.fillPassword('test123');
    loginPage.submit();
    });
});

cypress中的command

对于e2e测试中，有很多相似的步骤比如登录，输入账号密码点击登录，通常来说我们可以把它抽象成一个方法。

export const login = (username: string, password: string) => {
    cy.get('#email').type(username)
    cy.get('#password').type(password)
    cy.get('#signin_btn').click()
  }

对与cypress而言还提供了一种command方式。

declare global {
  namespace Cypress {
    interface Chainable {
      login:(email: string, password: string)=>Chainable
    }
  }
}

export function login(email: string, password: string){
  cy.get('#email').type(email)
  cy.get('#password').type(password)
  cy.get('#signin_btn').click()
}

Cypress.Commands.add('login', login);

通过command方式添加接口，此时便可以使用cy.login()使用

设计一个filter

在E2E的测试中我们经常遇到的一种场景是我希望只执行P0或者 P1的case，这时候改如何设计的，设计一个Filter的函数，代码如下。

const TestFilter = (definedTags:string[], runTest:Function) => {
    if (Cypress.env('TEST_TAGS')) {
      const tags = Cypress.env('TEST_TAGS').split(',');
      const isFound = definedTags.some((definedTag) => tags.includes(definedTag));
  
      if (isFound) {
        runTest();
      }
    }
  };
  
  export default TestFilter;

如何写case呢？

/// 
// CYPRESS_TEST_TAGS=P0 yarn cy:test -s "**/testFilter.ts"
// CYPRESS_TEST_TAGS=P1 yarn cy:test -s "**/testFilter.ts" match 0
import TestFilter from '../support/testFilter';

TestFilter(['P0'], () => {
  describe('Test A', () => {
    it('should run test A successfully', () => {
      expect(1 + 1).to.be.equal(2);
    });
  });
});

当执行CYPRESS_TEST_TAGS=P0 yarn cy:test -s "/testFilter.ts" 该case会被执行。执行CYPRESS_TEST_TAGS=P1 yarn cy:test -s "/testFilter.ts" 此时不会执行，因为在case里面的TEST_TAGS为P0,会skip掉这次的测试。