賽普拉斯中的自定義子命令不執行點擊

Question

背景：

我正在使用賽普拉斯為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組件生成的，所以我不能更改它，而唯一的解決方法是在click命令中使用{force:true} 。

問題：

由於這些元素很少，並且為了保持DRY原理，我想創建一個名為forceClick的自定義子命令，該命令簡單地包裝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自定義命令未執行forceClick命令嗎？

Answer 1

您快要准備好了，只是想念要處理的subject不得不wrap它。

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');