标签: cypress

有人可以帮我检查一下 cypress 中的单选按钮是否被单击。这些单选按钮是引导程序一次，因此单选按钮的类没有变化。

这是单选按钮的完整元素：

> <input _ngcontent-ixv-c132="" type="radio" formcontrolname="gender"
> value="M" class="form-check-input ng-pristine ng-valid ng-touched"
> id="flexRadioM_0" data-testid="g-male-0">

我尝试过这种方法来记录单选按钮状态，但没有成功。

 const cb = document.querySelector('[data-testid="g-female"]');
 cy.log(cb.checked)

以前使用过下面的一个，现在这个不起作用，因为类没有根据单选按钮的单击而更改，

const maleRadioBtn = cy.get('[data-testid="g-male-0"]')
maleRadioBtn.should('have.class', 'mat-radio-button mat-accent mat-radio-checked')

我可以使用一些帮助来向我解释 cypress 中的自定义命令如何工作。我目前正在编写一个函数，该函数读取 json 文件并将内容加 1，并希望将其返回到测试规范，以便可以将其输入到字段中。注意* JS 和 Cypress 的新功能

这是commands.ts 中的代码：

Cypress.Commands.add('newUser', () => {
    cy.readFile('cypress/fixtures/users.js
    const oldUser = user.user;
    cy.log(typeof oldUser);
    // Getting old number from user
    const reg = /\d+/gm;
    let oldNum = oldUser.match(reg);
    cy.log(oldNum);
    oldNum = toInteger(oldNum);
    cy.log(typeof oldNum);
    // New number for user
    const newNum = oldNum + 1;
    cy.log(newNum.toString());
    let newUser = oldUser.split(reg);
    cy.log(newUser);
    // Add to a specified location
    newUser.splice(1, 0, newNum);
    cy.log(newUser);
    newUser = newUser.join('');
    // cy.log(newUser);
    cy.writeFile('cypress/fixtures/users.json', { user: newUser }); …

我在 support/header.js 下创建一个新文件以重复使用以检查标头我还将其导入到 e2e.js

header.js

Cypress.Commands.add('checkHeader',() => {

    //* FAVICON
    it('Check Favicon 1', () => {
        cy.get('head link[type="image/png"]') 
          .should('have.attr', 'href') 
          .and('eq', '/favicon-32x32.png?v=26696447bf4055aecabfb5be2539b037');
    });
});

我将其导入到测试 e2e/test-header.cy.js

describe('Header', () => {

    //* VISIT THE WEBPAGE
    it('Visit the website', () => {
        cy.visit(Cypress.env('baseUrl'));
        
    });

    it('Check Header', () => {
        cy.checkHeader();
    });
});

当我运行测试时它什么也没做。

我怎样才能解决这个问题？

与柏树一起工作。我试图将一个新元素附加到页面并检查它是否渲染正常。（我们的代码有一个错误）。我想出的测试看起来像：

it('should be able to set attributes before append', () => {
  cy.get('body').then(() => {
    const elem: any = document.createElement('ids-tag');
    elem.color = 'red';
    elem.clickable = true;
    elem.dismissible = true;
    elem.id = 'test';
    document.body.appendChild(elem);

    cy.get('#test')
      .invoke('attr', 'color')
      .should('eq', 'red');
  });
});

然而，这是失败的，因为我认为该元素附加在不同的主体中。所以有几个问题：

1. 这是在 cypress 中测试 createElement 的好方法吗？
2. 我怎样才能去cy.get('#test')上班

没有找到太多关于如何在 cypress 中附加到 DOM 的信息。

我的想法是我想使用操作，每个操作都有一个名称和一个固定文件，
每个路径都有一个包含数据的文件。
我有一个命令，只需调用操作名称即可获取固定文件，这里的主要问题是固定装置的 json 文件中的代码是否正确：

{
    "stremeadConfig": "./alerts-escalation-param.stremead.json",
    "screenIds": [],
    "institutionInputId": "bank_code",
    "screenLabels": {
      "searchLabels": "./alerts-escalation-param.search-labels.json",
      "detailsLabels": "./alerts-escalation-param.details-labels.json"
    },
    "search":  "./alerts-escalation-param.select.json",
    "searchCriteriaFields": [],
    "requiredFieldsOnSearchScreen": [],
    "requiredFieldsOnDetailsScreen": [],
    "operationsDefaultExpectedValues": {
      "numberOfColumnsOnEmptyRow": 1,
      "numberOfRecordsAfterDelete": 0
    },
    "existingDataToDelete": "./alerts-escalation-param.existing.json",
    "operations": [
      "./alerts-escalation-param.select.json",
      "./alerts-escalation-param.create.json",
      ".alerts-escalation-param.update.json",
      "./alerts-escalation-param.duplicate.json",
      "./alerts-escalation-param.delete.json"
    ]
  }

技术堆栈： Angular v15 和 Cypress V12

我的组件和 e2e 测试似乎运行良好，但在运行测试时出现这些奇怪的终端错误。

这可能是我的共享命令的赛普拉斯配置存在问题。

这是我的共享命令：

declare global {
  namespace Cypress {
    interface Chainable {
      loginAs(role?: string): Chainable<any>,
      isWelcomePage(): Chainable<any>,
      openMenu(): Chainable<any>,
    }
  }
}

Cypress.Commands.add('loginAs', (role?: string) => {
  const user = Cypress.env('user');
  cy.visit(Cypress.env('local'));
  cy.get('#mat-input-0', { timeout: 30000 }).should('be.visible').type(user.email);
  cy.get('#mat-input-1', { timeout: 30000 }).should('be.visible').type(user.password);
  cy.get('.btn').click({ force: true });
});

这是我的赛普拉斯配置：

import { defineConfig } from "cypress";
const { verifyDownloadTasks } = require('cy-verify-downloads');

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on('task', verifyDownloadTasks)
    },
    specPattern: …

我想MutationObserver与 Cypress 一起使用，因为它感觉像是一种适当的机制，用于检测 DOM 发生的特定更改，然后与添加的元素进行交互。

假设我有一个包含 3 个按钮和一个div.new-elements-wrapper. 单击每个按钮会生成一个新div元素，按钮 A、B 和 C的属性div.new-elements-wrapper分别为 、 、和。这些元素可以随机插入，而不仅仅是附加到容器的末尾。data-typebutton-abutton-bbutton-cdiv.new-elements-wrapper

我想编写一个有效的测试：

1. 单击按钮 A。
2. 等待新元素添加到div.new-elements-wrapper区域。
3. 当新元素出现在区域中时，验证它是否具有data-type属性并且其值为button-a。

对按钮 B 和 C 重复上述操作。

对于步骤 2，我不想继续MutationObserver，直到配置为专门查看 的 adiv.new-elements-wrapper在突变的 中具有单个节点nodesAddedList。然后，在步骤 3 中，验证data-type属性为button-a。

对于赛普拉斯的奇才们来说，你会怎么做呢？

编辑：请注意，添加的这些组件没有可用的唯一标识信息。如果有两个元素，两者都是button-a，那么知道添加了哪个元素的唯一方法是通过 a 通知MutationObserver。

我想在 Cypress 中检查名称文档列的所有行中的内容是否相同。比方说

该表没有固定的行数。

附加问题：如何检查最新的（发布日期列）是否位于顶部？

我的服务器在 Postman 中返回 JSON 响应，其形式如下：

     {
       "accountType": "CHECKING",
       "message": "Your account is overdrawn",
       "withdrawalCode": 'SZWW-2000-11-CD'
    }

我正在像这样使用 Cypress 发送请求，并尝试断言所有字段。这是我的尝试

      cy.request({
        method: 'POST',
        url: 'http://users/bank-account/withdrawal', 
        body: {     
          name: "paul.king@asher-bank.com",
          password: "test123"
        },
        failOnStatusCode:false
     }).its('body')
       .should('have.property', 'accountType', 'Checking')
       .should('have.property', 'message','User with withdrawal ref: \'CCR-001-009-GG\' is overdrawn')
       .should('have.property', 'withdrawalCode','SZWW-2000-11-CD')
    })

这 3 个属性中只允许第一个属性断言。其他2个是不允许的。我如何断言多个属性。

我想知道是否可以将使用访问的页面转换cy.visit(url)为 pdf ？Chrome api有Page.printToPDF https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-printToPDF 是否可以通过Cypress.IO访问chrome api并将当前页面打印到pdf文件？我搜索互联网但没有找到合适的解决方案