Logging in to WordPress with Cypress Testing

Cypress is a popular end-to-end testing framework that can be used to test web applications, including those built on WordPress. One of the key features of Cypress is its ability to easily authenticate a user in the local environment, which is crucial for testing any functionality that is only available to logged-in users.

In this blog post, we will break down the code snippet that demonstrates how to authenticate a user using Cypress in a WordPress environment:

The Code:

// / <reference types="cypress" />
/* eslint-disable no-undef, jasmine/missing-expect, max-len */

Cypress.Commands.add('login', (username, password) => {
  cy.getCookies().then((cookies) => {
    let hasMatch = false;
    cookies.forEach((cookie) => {
      if ('wordpress_logged_in_' === cookie.name.substr(0, 20)) {
        hasMatch = true;
      }
    });
    if (! hasMatch) {
      cy.visit('http://local.yourdomain.io/wp-login.php').wait(1000);
      cy.get('#user_login').type(username);
      cy.get('#user_pass').type(`${password}{enter}`);
    }
  });
});

File Setup:

The first line of the code, // / <reference types="cypress" />, is a reference to the Cypress types. This line is necessary for the code to work properly in Cypress.

The next line, /* eslint-disable no-undef, jasmine/missing-expect, max-len */, is a comment that disables certain ESLint rules that might cause issues with the code.

The next section of the code is where the login command is defined and added to Cypress.

Login Function:

Cypress.Commands.add('login', (username, password) => {

This command takes two arguments, username and password, which will be used to log in to the WordPress site.

Checking Cookies:

The next line of code is cy.getCookies().

cy.getCookies().then((cookies) => {

This method retrieves all the cookies from the current browser and returns them as an array of objects.

The following block of code uses cookies.forEach((cookie) => { to iterate over each cookie and check if a cookie with a name that starts with “wordpress_logged_in_” exists.

let hasMatch = false;
cookies.forEach((cookie) => {
  if ('wordpress_logged_in_' === cookie.name.substr(0, 20)) {
    hasMatch = true;
  }
});

If a match is found, the script assumes that the user is already logged in, and no further action is taken. If no match is found, the code uses the cy.visit() method to navigate to the login page of the WordPress site.

Logging In:

if (! hasMatch) {
  cy.visit('http://local.yourdomain.io/wp-login.php').wait(1000);}

The cy.visit() method takes a single argument, which is the URL of the login page.

After navigating to the login page, the code uses the cy.get() method to select the #user_login and #user_pass elements, which correspond to the username and password fields respectively. It then uses the .type() method to enter the provided username and password into these fields.

cy.get('#user_login').type(username);
cy.get('#user_pass').type(`${password}{enter}`);

Finally, the {enter} is added at the end of the password so that when the password is entered, the form will be submitted automatically.

Calling the Function:

In order to call this function only once, you will want to reference this in the cypress/support/index.js file. Call the cy.login() function inside of the before filter so that the login will happen once, before all tests have run (as part of a setup script).

before(() => {
    cy.login('username', 'password');
});

Conclusion:

And that’s it!

Cypress is a great tool for testing WordPress websites, and its ability to easily authenticate a user in the local environment makes it a valuable addition to any WordPress development workflow. With this code snippet, you can easily authenticate a user in your local environment, allowing you to test any functionality that is only available to logged-in users.

Note: Remember to change the URL of the login page in the cy.visit() method to match your own local environment.