赛普拉斯 - 使用 google recaptcha 测试联系表答案

【问题标题】：Cypress - testing a contact form with google recaptcha赛普拉斯 - 使用 google recaptcha 测试联系表
【发布时间】：2019-11-03 21:48:20
【问题描述】：

如何使用 google recaptcha 测试联系表单？

我想测试“我们会尽快回复您”。消息出现。

【问题讨论】：

标签： recaptcha cypress

【解决方案1】：

我创建了自己的 Cypress 命令来测试 Google reCAPTCHA

Cypress.Commands.add('solveGoogleReCAPTCHA', () => {
  // Wait until the iframe (Google reCAPTCHA) is totally loaded
  cy.wait(500);
  cy.get('#g-recaptcha *> iframe')
    .then($iframe => {
      const $body = $iframe.contents().find('body');
      cy.wrap($body)
        .find('.recaptcha-checkbox-border')
        .should('be.visible')
        .click();
    });
});

我将此命令与 Google 给出的说明结合起来：

https://developers.google.com/recaptcha/docs/faq#id-like-to-run-automated-tests-with-recaptcha.-what-should-i-do

所以，我不得不对我的源代码做一些小的改动：

export const RECAPTCHA_SITE_KEY: string = window.Cypress
  ? '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI'
  : 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';

【讨论】：

我没有测试，但看起来还可以。
@amoninaalvarez - 您在脚本中将验证码盐密钥和站点密钥保存在哪里？
正如 Jan Paul 在他的回答中提到的，还要确保在 cypress.json 中将 chromeWebSecurity 设置为 false，否则 cypress 将无法访问 iframe 内容

【解决方案2】：

经过一些尝试，我想出了这个：

Cypress.Commands.add('confirmCaptcha', function () {
  cy.get('iframe')
    .first()
    .then((recaptchaIframe) => {
      const body = recaptchaIframe.contents()
      cy.wrap(body).find('.recaptcha-checkbox-border').should('be.visible').click()
    })
})

还要确保您的 cypress.json 文件中有此内容，否则无法访问 iFrame：

"chromeWebSecurity": false

【讨论】：

【解决方案3】：

这对我有用，不需要cy.wait(500) 或其他固定时间，因为它使用its 中的 cypress 隐式等待来加载 iframe 内容。

         cy.get('iframe')
            .first()
            .its('0.contentDocument.body')
            .should('not.be.undefined')
            .and('not.be.empty')
            .then(cy.wrap)
            .find('#recaptcha-anchor')
            .should('be.visible')
            .click();

这也可以作为自定义命令添加。它基于这篇博文：https://www.cypress.io/blog/2020/02/12/working-with-iframes-in-cypress/

【讨论】：

【解决方案4】：

Cypress 在他们的最佳实践页面上有很好的建议：https://docs.cypress.io/guides/references/best-practices.html#Visiting-external-sites

基本上归结为：如果它不是您自己的应用程序，只需存根即可。信任第 3 方来测试他们自己的页面。

【讨论】：

我不想测试recaptcha；我想测试我的申请，我的表格；但是有一个recaptcha；我如何确定“我们将尽快回复”的信息。用户点击发送按钮后出现？