如何使用 Cypress 登录 cognito Google Oauth？

Question

我想测试一个只有 Google Oauth 通过 AWS Cognito 登录的应用程序。 许多关于如何使用 cypress 通过用户名和密码使用 AWS Amplify 以编程方式登录 Cognito 的指南，但找不到任何关于如何使用 Google Oauth 进行登录的指南。

我试图使用柏树点击按钮进行身份验证，但我认为谷歌上有点击伪造保护。

我还能够使用此cypress 文档直接登录 Google，并将 jwt 放入 session 存储中，但不确定是否有办法将其传递给 Cognito。

Answer 1

如果您要进行端到端测试，那么最简单的方法是在 Cognito 中没有 Google Oauth 登录的另一个非产品暂存环境，而是您提到的具有工作示例的用户名密码登录。

这也是一个好主意，因为无论如何您都不应该在测试中使用您的生产用户系统。

Answer 2

我尝试了很多方法来解决这个问题，包括从 Google 获取 oauth 令牌，并尝试用 Cognito 手动交换它以获得 AWS API 网关所需的令牌。 我也尝试过 cypress-social-logins 但没有成功（因为这个错误）

最后，我编写了自己的 cypress 步骤，使用有效的 session 登录到我的应用程序。请注意，这在 CI/CD 中不起作用，因为它可能会触发 Google 验证，因此它是一个半自动化的解决方案。

如果有疑问，我推荐 Tom Roman 在下面关于在 cognito 中创建预生产环境的回答，该环境允许用户名/密码登录而不是乱用谷歌登录。

// /support/login.js
Cypress.Commands.add('loginByGoogle', () => {
        
        cy.visit('http://localhost:3030')

        cy.origin('https://somecognitouserpool.auth.eu-west-1.amazoncognito.com', () => {
            cy.contains('button', 'Continue with Google')
            .click({force: true}) 
        })
        
        cy.origin('https://accounts.google.com', () => {
            const resizeObserverLoopError = /^[^(ResizeObserver loop limit exceeded)]/;
            Cypress.on('uncaught:exception', (err) => {
                /* returning false here prevents Cypress from failing the test */
                if (resizeObserverLoopError.test(err.message)) {
                return false;
                }
            });
            cy.get('input#identifierId[type="email"]')
            .type(Cypress.env('googleSocialLoginUsername'))
            .get('button[type="button"]').contains('Next')
            .click()
            .get('div#password input[type="password"]')
            .type(Cypress.env('googleSocialLoginPassword'))
            .get('button[type="button"]').contains('Next')
            .click();
        });
    
});

// /e2e/sometest.cy.js
before(() => {
  cy.loginByGoogle();
});

describe('E2E testing', () => {
  it('should now have a session', () => {
  })
});

您还需要一个 .env 文件（因为您不想将您的 google 凭据保存到 github 中）

GOOGLE_USERNAME = ''
GOOGLE_PASSWORD = ''

您还需要两个实验性标志（截至 2022 年 11 月 14 日）

// cypress.config.js
const { defineConfig } = require('cypress');
require('dotenv').config()

module.exports = defineConfig({
  env: {
    googleSocialLoginUsername: process.env.GOOGLE_USERNAME,
    googleSocialLoginPassword: process.env.GOOGLE_PASSWORD
  },
  e2e: {
    experimentalSessionAndOrigin: true,
    experimentalModifyObstructiveThirdPartyCode: true
  }
})

这是我的 package.json 以便您可以看到我正在使用的确切包。 特别是我添加了标志--headed --no-exit以便在必要时手动完成 2 因素身份验证。 我还没有想出如何阻止谷歌每次都要求这个。

{
  "name": "docs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "http-server . -p 3030",
    "cy:run": "cypress run --headed --no-exit",
    "test": "start-server-and-test start http://localhost:3030 cy:run"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "cypress": "^11.0.1",
    "start-server-and-test": "^1.14.0"
  },
  "dependencies": {
    "dot-env": "^0.0.1",
    "dotenv": "^16.0.3"
  }
}