testing - 使用 Cypress 测试依赖 OAuth 的应用程序

Question

我继承了一个依赖于 OAuth 的 Node.js 网络应用程序。每当您访问页面时，该应用程序都会确保您已通过身份验证。请注意，这里没有 Angular、React、Vue 等。每个页面都是纯 HTML。

我想使用 Cypress 测试这个网站.我的问题是，我卡在了身份验证提供商的初始重定向上。 Cypress 确认 OAuth is a challenge .

commands.js

Cypress.Commands.add('login', (credentials) => {
  var settings = {
    'clientId':'<id>',
    'scope':'<scope-list>',
    ...
  };

  var body = `client_id=${settings.clientId}&scope=${settings.scope}...`;

  var requestOptions = {
    method: 'POST',
    url: 'https://login.microsoftonline.com/...',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: body
  }

  cy.request(requestOptions);
});

然后，在我的测试中，我有:

context('Home', () => {
  it('Visits Successfully', () => {
    cy.login();

    cy.title().should('include', 'welcome');
  });
});

在测试运行器中，我看到正在发生登录 POST 请求。我确认正在使用 console.log 接收访问 token ，但是，我的标题是空的。这就像在 Cypress 中没有发生 OAuth 之后的重定向。但是，当我在浏览器中访问该站点时，重定向按预期进行。

我错过了什么？

Answer 1

您可能遗漏的是实际 UI 流程和使用第 3 方网站执行 OAuth 的编程流程之间的混淆。

您要做的是完成程序化登录，然后在测试代码中手动将所需参数发送到您的应用程序的 OAuth 回调 URL。

这里给出了一个示例(虽然它使用了不同的授权类型，但它给了你一个想法)https://auth0.com/blog/end-to-end-testing-with-cypress-and-auth0/#Writing-tests-using-Cypress-Login-Command

cypress github 上处理类似问题的另一个问题 https://github.com/cypress-io/cypress/issues/2085

这也可能有帮助: https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/logging-in__single-sign-on/cypress/integration/logging-in-single-sign-on-spec.js