cypress 中的自定义子命令不执行点击答案

【问题标题】：Custom child command in cypress doesn't perform clickcypress 中的自定义子命令不执行点击
【发布时间】：2019-12-13 14:49:42
【问题描述】：

背景：

我正在使用 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 元素是由一些第 3 方 React 组件生成的，所以我无法更改它，我可以解决它的唯一方法是在 click 命令中使用 {force:true}。

问题：

因为这些元素很少，并且为了保持 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 自定义命令不执行点击命令吗？

【问题讨论】：

标签： cypress add-custom-command

【解决方案1】：

我从未见过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');

【讨论】：

谢谢@Mr。 J. 为您的回应。但是，AFAIU 您的解决方案是使用父命令而不是子命令。虽然这是一个可能的解决方案，但这不是我想要的，因为它在“获取”和“点击”之间产生了耦合，这不是我想要的。另外，我想了解为什么我的解决方案不起作用，而不仅仅是其他解决方案起作用。
检查，很遗憾我帮不了你

【解决方案2】：

你快到了，你只是错过了如果你想使用它，你必须wrapsubject。

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

【讨论】：