Question

背景：

我正在使用Cypress为React Web应用程序编写测试自动化。在应用程序中，我有一个对话框，其中需要单击一些元素。当我尝试单击这些元素中的任何一个时，赛普拉斯给我一个错误，该元素不可见because its content is being clipped by one of its parent elements, which has a CSS property of overflow: 'hidden', 'scroll' or 'auto'。因为这些DOM元素是由某些第三方的React组件生成的，所以我无法更改它，而解决该问题的唯一方法是在{force:true}命令中使用click。

问题：

由于这些元素很少，并且为了保持DRY原理，我想创建一个名为forceClick的自定义子命令，该命令简单地包装subject.click({force:true})。但是，由于某种原因，当我这样做时，赛普拉斯根本不执行click命令！

注意：出于调试目的，我还向自定义命令中添加了cy.log命令，奇怪的是，我看到此log命令已执行，并且仅click命令没有。

代码如下：

Cypress.Commands.add('forceClick', {prevSubject:'element'}, subject => {
    cy.log('forceClick was called!');
    subject.click({force:true})});

在测试中，我有以下一行：

cy.get("[data-test='panel-VALUES']").forceClick();

请注意，如果我将其更改为以下行，它将按预期工作：

cy.get("[data-test='panel-VALUES']").click({force:true});

您知道为什么forceClick自定义命令未执行click命令吗？

Answer 1

您快到了，只是想念wrap subject（如果想使用它）。

Cypress.Commands.add('forceClick', {prevSubject: 'element'}, (subject, options) => {
  // wrap the existing subject and do something with it
  cy.wrap(subject).click({force:true})
})

Answer 2

我从未见过使用subject.click({force:true})的解决方案，不是说它不起作用，但我之前从未见过。无论如何，这是可行的：

自定义命令：

Cypress.Commands.add('forceClick', {prevSubject:'element'}, subject => {
  cy.log('forceClick was called!');
  cy.get(subject)
    .click({force:true})});
}

测试步骤：

cy.forceClick('[data-test="panel-VALUES"]');

如果仅使用forceClick，甚至可以将其进一步缩短：

自定义命令：

Cypress.Commands.add('forceClick', {prevSubject:'element'}, subject => {
  cy.log('forceClick was called!');
  cy.get(`[data-test=${subject}]`)
    .click({force:true})});
}

测试步骤：

cy.forceClick('panel-VALUES');

赛普拉斯中的自定义子命令不执行点击

2 个答案: