cypress学习

最新推荐文章于 2024-10-20 18:23:51 发布

你喜欢红豆吗

最新推荐文章于 2024-10-20 18:23:51 发布

阅读量844

点赞数 25

文章标签：学习网络 javascript

本文链接：https://blog.csdn.net/weixin_43462574/article/details/135767488

版权

本文介绍了如何使用Cypress测试框架进行前端界面功能测试，包括页面渲染、策略编辑（如客户端在线、账号锁定、会话超时、双因子认证和登录时间）以及截图捕获，展示了如何模拟用户操作并验证页面响应。

摘要由CSDN通过智能技术生成


Cypress.on('uncaught:exception', (err, runnable) => {
    // 打印错误信息到控制台
    cy.log('Uncaught Exception:', err.message);
  
    // 返回 false 阻止 Cypress 中止测试
    return false;
  });

规则

 describe(pathName, () => {
    before(() => {
      cy.cecstackLogin(LOGIN_URL);
  
      cy.stackVisit(path, SHOT_TIME);
    });
  
    afterEach(() => {
      cy.stackVisit(path, 0);
    });
  
    it(`页面渲染_${THEME}_${ENV_HOST}`, function () {
      cy.get('.arco-layout-content').should('exist');
      cy.screenshot(`${pathName}-${this.test.title}`, { capture: 'fullPage' });
    });
    
    it(`客户端同时在线策略编辑_${THEME}_${ENV_HOST}`, function () {
        cy.contains('客户端同时在线策略')
        .find('button')
        .click()
        .wait(1000)
        .parent()
        .find('button')
        .should('have.length', 2)
        cy.screenshot(`${pathName}-${this.test.title}`, { capture: 'fullPage' });
      }); 
      it(`账号锁定策略编辑_${THEME}_${ENV_HOST}`, function () {
        cy.contains('账号锁定策略')
        .find('button')
        .click()
        .wait(1000)
        .parent()
        .find('button')
        .should('have.length', 2)
        cy.screenshot(`${pathName}-${this.test.title}`, { capture: 'fullPage' });
      }); 
      it(`会话超时策略编辑_${THEME}_${ENV_HOST}`, function () {
        cy.contains('会话超时策略')
        .find('button')
        .click()
        .wait(1000)
        .parent()
        .find('button')
        .should('have.length', 2)
        cy.screenshot(`${pathName}-${this.test.title}`, { capture: 'fullPage' });
      }); 
      it(`双因子认证配置编辑_${THEME}_${ENV_HOST}`, function () {
        cy.contains('双因子认证配置')
        .find('button')
        .click();
        cy.get('.arco-modal-title').should('contain', '双因子认证');
        cy.screenshot(`${pathName}-${this.test.title}`, { capture: 'fullPage' });
    });
    it(`登录时间策略编辑_${THEME}_${ENV_HOST}`, function () {
        cy.contains('会话超时策略')
        .find('button')
        .click()
        .wait(1000)
        .parent()
        .find('button')
        .should('have.length', 2)
        cy.screenshot(`${pathName}-${this.test.title}`, { capture: 'fullPage' });
      }); 
      it(`双因子认证配置编辑_${THEME}_${ENV_HOST}`, function () {
        cy.contains('双因子认证配置')
        .find('button')
        .click();
        cy.get('.arco-modal-title').should('contain', '双因子认证');
        cy.screenshot(`${pathName}-${this.test.title}`, { capture: 'fullPage' });
    });
    it(`自定义登录时间添加_${THEME}_${ENV_HOST}`, function () {
        cy.contains('自定义登录时间')
        .find('button')
        .click()
        .wait(6000);
        cy.get('.arco-modal-title').should('contain', '添加');
        cy.screenshot(`${pathName}-${this.test.title}`, { capture: 'fullPage' });
    });
    it(`访问IP管理_${THEME}_${ENV_HOST}`, function () {
        cy.get('[role="tab"]').contains('访问IP管理')
        .should('exist')
        .click();
        cy.wait(6000);
        cy.get('.accessing-ip-settings').should('exist');
        cy.screenshot(`${pathName}-${this.test.title}`, { capture: 'fullPage' });
    });
    it(`访问IP管理添加_${THEME}_${ENV_HOST}`, function () {
        cy.get('[role="tab"]').contains('访问IP管理')
        .should('exist')
        .click();
        cy.wait(6000);
        cy.contains('添加访问IP')
        .should('exist')
        .click();
        cy.get('.arco-modal-title').should('contain', '添加访问IP');
        cy.screenshot(`${pathName}-${this.test.title}`, { capture: 'fullPage' });
    });
    it(`访问IP管理编辑_${THEME}_${ENV_HOST}`, function () {
        cy.get('[role="tab"]').contains('访问IP管理')
        .should('exist')
        .click();
        cy.wait(6000);
        cy.get('span').contains('编辑').eq(0)
        .should('exist')
        .click();
        cy.get('.arco-modal-title').should('contain', '编辑访问IP');
        cy.screenshot(`${pathName}-${this.test.title}`, { capture: 'fullPage' });
    });

    // 删除目前只是截图 ，没有判断是否抱死
    it(`访问IP管理删除_${THEME}_${ENV_HOST}`, function () {
        cy.contains('访问IP管理')
        .should('exist')
        .click();
        cy.wait(6000);
        cy.get('span').contains('删除')
        .should('exist')
        .click();
        cy.screenshot(`${pathName}-${this.test.title}`, { capture: 'fullPage' });
    });
  });

describe(,)是 Cypress 测试框架中用来创建测试套件的函数,包含两个参数

it(`页面渲染_${THEME}_${ENV_HOST}`, function () {
  cy.get('.arco-layout-content').should('exist');
  cy.screenshot(`${pathName}-${this.test.title}`, { capture: 'fullPage' });
});

检查页面是否成功渲染，并且在测试过程中进行截图.

it()函数用于创建一个测试用例，参数是一个描述或名称字符串，这里使用了模板字符串来动态生成测试用例名称。

测试用例的主体代码位于函数体内。
cy.get('.arco-layout-content').should('exist') 是一个断言语句，用于检查页面中是否存在一个类名为 .arco-layout-content 的元素。如果存在，则断言成功；如果不存在，则断言失败，测试将会失败。
.arco-layout-content 是一个 CSS 类选择器，用于选择具有该类名的元素。
cy.screenshot(pathName−pathName−{this.test.title}, { capture: 'fullPage' }) 是一个截图命令，用于将当前页面进行截图。截图的文件名使用了模板字符串来动态生成，格式为 ${pathName}-${this.test.title}，其中 pathName 表示测试套件的名称，this.test.title 表示当前测试用例的名称。截图选项 capture: ‘fullPage’ 表示截取整个页面而不仅仅是可见区域。

这个测试用例的目的是验证页面是否成功渲染，并在测试过程中生成截图以供参考。如果页面渲染正常，断言成功；如果页面渲染失败，断言失败，测试将会失败。截图可以帮助我们在测试失败时进行调试和分析。

it(`停用_${THEME}_${ENV_HOST}`, function () {
  cy.getActiveButtonByText('停用').click();
  cy.byRole('dialog').should('exist');
  cy.screenshot(`${pathName}-${this.test.title}`, { capture: 'fullPage' });
});

it(停用_{THEME}_{ENV_HOST}, function () { ... })是一个测试用例，用于描述停用功能。与之前的例子类似，使用模板字符串生成了测试用例名称。
测试用例的主体代码位于函数体内。
cy.getActiveButtonByText('停用').click()是一个命令，用于通过获取按钮上的文本内容来选择“停用”按钮，并模拟点击事件。

cy.getActiveButtonByText('停用')这部分代码调用了自定义的 Cypress 命令 getActiveButtonByText，并传入了 '停用' 作为参数。该命令的作用是根据按钮的文本内容获取该按钮元素。自定义命令可以通过 Cypress.Commands.add() 来添加到 Cypress 中。
.click(): 在获取到按钮元素后，.click() 方法用于模拟用户点击按钮的操作。
综合起来，这句话的作用是在页面中找到文本内容为 “停用” 的按钮，并模拟点击该按钮。这通常用于触发按钮的点击事件，以便进行相应的操作或测试。
cy.byRole('dialog').should('exist')是一个断言语句，用于检查页面中是否存在一个具有 role 属性为 “dialog” 的元素。如果存在，则断言成功；如果不存在，则断言失败，测试将会失败。
dialog 是一种用于表示对话框或模态窗口的 HTML 元素。
cy.screenshot(pathName−pathName−{this.test.title}, { capture: 'fullPage' })是一个截图命令，与之前的例子相似，用于截取当前页面的全屏截图。

该测试用例的流程如下：

找到文本内容为“停用”的按钮并点击。
检查是否存在一个具有 role 属性为 "dialog" 的元素。
进行全屏截图。

这个测试用例的目的是验证停用功能是否正常工作，并在测试过程中生成全屏截图以供参考。如果停用功能正常，断言成功；如果停用功能有问题，断言失败，测试将会失败。

PS

cy 是 Cypress 测试框架中的全局对象，它提供了一组命令和方法来编写测试代码。cy 对象可以用于与应用程序进行交互，模拟用户的行为，执行断言操作，进行页面元素选择等。

在 Cypress 中，我们可以使用 cy 对象来执行各种操作，例如：

使用 cy.visit() 访问指定的页面。
使用 cy.get() 选择页面上的元素。
使用 cy.click() 模拟点击事件。
使用 cy.type() 输入文本内容。
使用 cy.should() 进行断言操作，检查页面上的元素是否符合预期。

cy.byRole 是 Cypress 中的一个自定义命令，用于根据 HTML 元素的 role 属性来选择 DOM 中的元素。role 属性用于描述特定元素在网页中扮演的角色，例如按钮、菜单、对话框等，可以通过这个属性来识别页面上的交互元素。

cy.byRole 命令的作用类似于 cy.get 命令，但是它只能根据 role 属性来选取元素。命令的语法如下：
cy.byRole(role, options)
其中，role 参数是要选取的元素的 role 属性值，options 参数是一个可选的配置对象，用于添加额外的选项，比如设置超时时间或选择特定的文本内容等。
例如，在下面的代码中，我们使用 cy.byRole() 命令来选取具有 role 属性为 “button” 的元素，并检查其是否存在于 DOM 中：
cy.byRole('button').should('exist');
这句话的意思是：在页面中查找具有 role 属性为 “button” 的元素，如果该元素存在，则断言成功，否则测试将会失败。