乐趣区

关于web:web自动化测试之cypress篇章

jiezi

版本

文章依赖版本：^11.2.0 最新版本：

前提筹备与阐明

  • 装置 cypress 的客户端软件作为运行环境.
  • 在我的项目根目录下装置 cypress
  • 配置启动脚本 
{
    "e2e": "cypress open", // 关上客户端手动选择性执行
    "test": "cypress run && cypress run --component" // 在命令行里，执行所有的测试用例
}

cypress 的 api，都是以同步的写法，来异步执行的。比方 async await 那样，它不须要显示申明，间接调用。比方在获取元素的时候，它会有相应的等待时间来异步解决。

应用场景

返回某个页面 

cy.visit(url);

获取元素

选择器匹配 

// 这种匹配形式，能够参考 css 的 querySelector 的用法
cy.get(selector);

内容匹配 

// 内容匹配，下列语句将会匹配蕴含了 hello 文本的元素
cy.contain('hello');

事件调用

根本事件 

// 以调用点击事件为例，其它事件也能够同样如此
cy.get(selector).click();

简单事件 

// 这种形式，除了触发根本事件，还能够触发 mousedown、mouseup 这类的事件，来模仿简单的用户操作
cy.get(selector).trigger(eventName);

内容校验 

// 该语法是在判断选中的元素，应该有 hello 的内容
cy.get(selector).should('have.value', 'hello');

// 判断元素的 top 值，是否为 10 px;
cy.get(selector).should('have.css', 'top').and('eq', '10px');

// ...

模仿按键 

// 按住 ctrl
cy.get('body').type('{ctrl}', {release: false});

// 抬起 ctrl
cy.get('body').type('{ctrl}', {release: true});

接口申请

获取接口的调用后果 

// 开始监听某个接口
 cy.intercept({
    method: 'GET',
    // 比方监听 /api/login?account=xxx，写法为：/api/login*
    url: ` 接口的 path 局部 `, 
  }).as('test');

// 此处留神。在监听的代码开始执行时，前面的申请行为如果不是该接口，就会报错。也就是说，在开始监听后，须要确保接下来的申请肯定是这个监听的申请。所以不能一开始就去监听。举荐做法就是在监听后，确定后续行为马上能够监听到该接口来解决，比方在这里触发某个按钮的点击行为，来调用接口

// 获取接口的申请后果
cy.wait('@test')
    .its('response.body')
    .then(data => {cy.log(JSON.stringify(data));
    });

根据上述形容，能够封装如下办法应用 

export const watchRequest = <T>(url: string, trigger: () => void, callback: (data: T) => void) => {
    cy.intercept({
        method: 'GET',
        url: `${url}*`,
    }).as(url);

    trigger();

    cy.wait(`@${url}`)
    .its('response.body')
    .then(data) => {callback(data);
    });
};

批改申请参数 

// 批改 get 申请的参数
 cy.intercept('/api/test*', (req) => {const request = JSON.parse(req.query as string);
    req.query.account = 2;
});

留神：批改的申请参数，在控制台外面看申请时，参数没有产生显示变动，实际上曾经扭转了。

强制期待 

cy.wait(1000); // 期待 1s

自定义指令

元素是否存在

申明类型 

/// <reference types="cypress" />
/// <reference types="cypress-wait-until" />

declare namespace Cypress {
    interface Chainable<Subject> {
        /**
        * 查看元素是否存在
        *
        * @param selector 选择器
        * @return Chainable<Subject>
        */
        isElementExist(selector: string): Chainable<Subject>;
    }
}

定义指令 

/// <reference types="cypress" />
/// <reference types="cypress-wait-until" />

require("cypress-wait-until");

export function isElementExist(selector: string) {
    return cy
        .window()
        .then(($window) => $window.document.querySelector(selector));
}

Cypress.Commands.add("isElementExist", isElementExist);

应用指令 

cy.isElementExist(".shoe-id").then((value) => {if (value) {// ...} else {// ...}
}

测试数据

cypress/fixtures 目录下的 json 文件能够当作测试数据来用，例如: user.json:

{"username": "hello world"}

那么在应用的时候就能够这么获取 

cy.fixture('user').then(res => {console.log(res.username);
})

作者：Alex
文章题目：《web 自动化测试之 cypress 篇章》
文章公布日期：2023-02-17 14:56
原文博客链接：https://alex-blog-site.vercel…
GitHub: https://github.com/Alex-Progr…
著作权归作者所有。商业转载请分割作者取得受权，非商业转载请注明出处。

退出移动版