start
1.1 install
cd /path/projectyarn add cypress --dev
复制代码
1.2 open
1.3 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，可以看这篇https://www.jianshu.com/p/546c9dd166d3
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<any> } }}
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 呢？
/// <reference types="Cypress" />// CYPRESS_TEST_TAGS=P0 yarn cy:test -s "**/testFilter.ts"// CYPRESS_TEST_TAGS=P1 yarn cy:test -s "**/testFilter.ts" match 0import 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 掉这次的测试。
评论