如何在 Cypress 的 E2E 测试中登录 Auth0？

我已经开始测试 React Web 应用程序，但我没有走得太远，因为我遇到了登录问题。我在用cypress https://www.cypress.io/e2e测试工具。

将显示一个带有登录按钮的欢迎页面，该页面会将您重定向到auth0 https://auth0.com/服务。用户使用电子邮件和密码登录，然后使用令牌重定向回 Web 应用程序。

我尝试了许多不同的方法，每种方法都导致了不同的问题。

注意：我不想测试Auth0，我只想进入我的web应用程序。

尝试1.点击登录按钮

尝试过：Cypress 应该执行与用户相同的操作，因此测试将单击登录按钮并转到 Auth0 并填写凭据。 问题：Cypress 不允许您在测试期间导航到另一个域。

由于赛普拉斯会更改自己的主机 URL 以匹配您的应用程序的主机 URL，因此它要求您的应用程序在整个单个测试中保持在同一超级域上。 https://docs.cypress.io/guides/guides/web-security.html#One-Superdomain-per-Test

您应该能够禁用该设置"chromeWebSecurity": false in cypress.json但这还行不通，因为您只能访问一个域cy.visit() https://github.com/cypress-io/cypress/issues/944

尝试 2. 从测试中以编程方式登录

尝试过：从 cypress 测试登录auth0-js https://github.com/auth0/auth0.js库，因此不需要单击登录按钮，因此不会发生域更改。

describe('Waiting to fetch', () => {
  beforeEach(() => {
    this.fetchAuthDeferred = getDeferred()
    cy.visit('http://localhost:3000', {
      onBeforeLoad(win) {
        cy.stub(win, 'fetch')
          .withArgs($url)
          .as('fetchAuth')
          .returns(this.fetchAuthDeferred.promise)
      }
    })
  })

  it('login', () => {
    cy.visit('http://localhost:3000')

    const auth = new auth0.WebAuth(authOptions)
    auth.login(loginOptions)

    cy.get('@fetchAuth', { timeout: 10000 }).should('haveOwnProperty', 'token')

    cy.visit('http://localhost:3000')
    cy.get('[class*="hamburger"]').click()
  })
})

问题：cy.route() 不等待获取请求 https://github.com/cypress-io/cypress/issues/95，解决方法是使用cy.stub(win, 'fetch') https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/stubbing-spying__window-fetch/cypress/integration/spy-stub-clock-spec.js。它不会等待：

尝试 3. 从 web 应用程序以编程方式登录

尝试过：我开始认为 cypress 只监视来自应用程序的间谍请求，而不是来自测试本身的请求（正如我在上面的观点中尝试的那样）。

我添加了一个假登录欢迎页面中的按钮将调用auth0-js（因此没有域更改）使用硬编码凭据并从测试中单击它

cy.get('#fake-login').click()

问题：该策略有效，但我当然不想在欢迎页面中添加带有凭据的按钮。所以我尝试在测试期间将按钮元素添加到web应用程序中：

it('Login adding element', () => {
  cy.visit('http://localhost:3000')
  const = document.createElement('div')
  fakeLogin.innerHTML = 'Fake login'
  fakeLogin.onclick = function() {
    const auth = new auth0.WebAuth(authOptions)
    auth.login(loginOptions)
  }
  fakeLogin.style.position = 'absolute'
  fakeLogin.style.zIndex = 1000
  fakeLogin.id = 'fake-login'

  cy.get('#root').invoke('prepend', fakeLogin)
  cy.get('#fake-login').click()
  cy.get('[class*="hamburger"]').click() // Visible when logged in
})

由于某种原因，这不起作用，元素已添加，但不会等到发出请求。

所以我不知道还能尝试什么。 也许一切都是对如何在 E2E 中完成登录的误解，我是否应该使用模拟数据以便不需要登录？

赛普拉斯目前不支持此功能。不过，我建立了一个可能有帮助的解决方法。

我设置了一个与 cypress 并行运行的简单服务器。端点打开 Puppeteer 的无头实例并完成登录流程，使用所有 cookie 响应调用：

const micro = require("micro");
const puppeteer = require("puppeteer");
const url = require("url");

const login = async (email, password) => {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  await page.goto("https://my-login-page.com");
  // do whatever you have to do to get to your auth0 lock screen, then:
  await page.waitFor(".auth0-lock-input-email");
  await page.waitFor("span.auth0-label-submit");
  await page.type(".auth0-lock-input-email input", email);
  await page.type(".auth0-lock-input-password input", password);
  await page.click("span.auth0-label-submit");
  await page.waitFor("some-selector-on-your-post-auth-page");
  return page.cookies();
 };

const server = micro(async (req, res) => {
  // expect request Url of form `http://localhost:3005?email=blahblah&password=blahblah
  const data = url.parse(req.url, true);
  const { email, password} = data.query;
  console.log(`Logging ${email} in.`);
  return login(email, password);
});

server.listen(3005);

然后我只需扩展 Cypress 添加login命令：

Cypress.Commands.add("login", (email, password) => {
  const reqUrl = `http://localhost:3005?email=${encodeURIComponent(
    email
  )}&password=${encodeURIComponent(password)}`;
  console.log("Beginning login.", reqUrl);
  cy.request(reqUrl).then(res => {
    const cookies = res.body;
    cookies.forEach((c) => {
      cy.setCookie(c.name, c.value, c);
    });
  });
});

每次调用都需要大约 5-10 秒，这很糟糕，但比根本没有任何身份验证要好：/