使用 Cypress 登录 WordPress，无需使用 UI

In the 有关登录的 Cypress 文档他们指出不应使用 UI 设置状态。

但看起来 WordPress 的 API 中没有提供登录功能。 由于黑客攻击是大多数 WordPress 站点上的一个问题，所以我不想添加它。

如何使用 Cypress 登录 WordPress，而不使用 UI？

更新2020-09-03

如果没有办法解决这个问题，那么我只是在寻找最好的方法来做到这一点。是为了在某处实现一些隐藏的 API 登录端点吗？或者是无视 Brian Mann 的建议而只是使用 UI？

更新2020-10-02

首要问题

我自己也潜入其中。我想，我也许可以设置登录时放置的cookie。这一定是最好的方法。所以我们的目标是做出这样的东西：

1. 以点击方式登录（这是令人不悦的）。
2. 提取步骤1成功后设置的cookie。
3. 在用户必须登录的所有测试之前设置这些 cookie。

请注意，当您阅读有关 Cypress 的文章时，这可能接近于在很多地方提到的反模式。因此，如果您想与布莱恩·曼 (Brian Mann) 成为朋友，请不要这样做。但我的意思是...谁需要那个家伙！

2023-06 更新：更好的方法

有一个更好的方法，可以使用以下方法来实现：https://stackoverflow.com/a/76165542/1766219

所以你不依赖于测试的顺序。或者出现错误的失败（因为登录尚未发生）。

2020：原始答案

以下是具体操作方法。我花了HOURS，-但这对我有用并且经过了彻底的测试。我确实交换了下面的变量（显然）。

我创建了一堆命令，以便能够在测试之间快速登录/退出。

警告 - 添加到 .gitignore

记得添加adminUserLoginCookiesFromCypress.json to you .gitignore- 并且不要将其上传到您的服务器。如果落入坏人之手，那么某人将能够以您的用户身份登录（通过将 cookie 添加到他们自己的浏览器中）。

Env

该内容进入cypress.json在项目根目录中。

{
  "env": {
    "baseUrl": "https://s1.demo.opensourcecms.com/wordpress",
    "dashboardUrl": "https://s1.demo.opensourcecms.com/wordpress/wp-admin",
    "domain": "s1.demo.opensourcecms.com/wordpress",
    "users": {
      "admin": {
        "username": "opensourcecms",
        "email": "[email protected]",
        "pw": "opensourcecms"
      }
    }
  },
}

Commands

清除Cookies

由于某种原因，我不能（也不能）得到cy.clearCookies()上班。 如果我运行登录 WP 的测试，那么当测试第二次运行时，它仍然会被记录。就算我跑cy.clearCookies()第一件事（？！）

这个手册/特定的clearCookie-Command对我有用：

Cypress.Commands.add( "clearWordPressCookies", () => {
  cy.clearCookie( 'wordpress_a8b94154380982c3184a469b8aa525c6' );
  cy.clearCookie( 'wordpress_a8b94154380982c3184a469b8aa525c6' );
  cy.clearCookie( 'wordpress_logged_in_a8b94154380982c3184a469b8aa525c6' );
  cy.clearCookie( 'wordpress_test_cookie' );
});

请记住找到您站点的实际 cookie 名称并替换哈希值。cookie 名称中使用哈希值的原因是出于多站点目的

获取cookies

将 cookie 保存到文件中（在项目根目录中）。

Cypress.Commands.add( "getWordPressCookies", () => {
  cy.getCookies()
    .then( (cookies) => {
      cy.writeFile( 'adminUserLoginCookiesFromCypress.json', cookies );
    });
});

设置cookie

从保存的文件中设置 cookie（从获取 cookies 功能）。

Cypress.Commands.add( "setWordPressCookies", () => {

  cy.readFile( 'adminUserLoginCookiesFromCypress.json' )
    .then( (cookies) => {
      cookies.forEach( (cookie) => {
        // cy.log( JSON.stringify( cookie ) ); // See the cookie contents
        cy.setCookie( cookie.name, cookie.value, {
          domain: Cypress.env('domain'),
          path: cookie.path,
          secure: cookie.secure,
          httpOnly: cookie.httpOnly,
          expiry: cookie.expiry
        });
      });
    });
});

手动登录

这必须是第一次完成，以使 WordPress 生成 cookie。

Cypress.Commands.add( "manualWordPressLogin", () => {
  cy.clearWordPressCookies();
  cy.visit( Cypress.env('dashboardUrl') );
  cy.get('#user_login').wait(200).type( Cypress.env('users').admin.username , { force: true } );
  cy.get('#user_pass').wait(200).type( Cypress.env('users').admin.pw, { force: true } );
  cy.get('#wp-submit').click();
  cy.get('h1').contains( 'Dashboard' );
});

用法示例

context( 'Login, set and prep cookies' , function () {

  it( 'Ensure no one is logged in', function() {
    cy.clearWordPressCookies();
    cy.visit( Cypress.env('dashboardUrl') );
    cy.location('pathname').should('eq', '/wp-login.php' ); // Not logged in
  });


  it( 'Logs in a admin user', function(){
    cy.manualWordPressLogin();
    cy.getWordPressCookies();
    cy.visit( Cypress.env('dashboardUrl') );
    cy.location('pathname').should( 'match', /^\/wp-admin/ );
  });  
  

  it( 'logs out the user - and logs back in using setting wp-cookies', function(){
    cy.clearWordPressCookies();
    cy.visit( Cypress.env('dashboardUrl') );
    cy.location('pathname').should( 'match', /^\/wp-login\.php/ ); // Not logged in
    cy.setWordPressCookies();
    cy.visit( Cypress.env('dashboardUrl') );
    cy.location('pathname').should( 'match', /^\/wp-admin/ ); // Is logged in
  });

});