Setup And Run Cypress Tests With Your WordPress Plugin

In this blog, we will learn how to setup and run Cypress test with your WordPress plugin.

Source Code: (for smart people 😉) https://github.com/imranhsayed/aquila-features/pull/7

In this blog, we will learn how to setup and run Cypress test with your WordPress plugin.

Step 1: Install Cypress( Assuming you already have a package.json file in your project, else run npm init first.

npm install cypress --save-dev

This will install cypress locally in node_modules of your project.

Step 2: Add the cypress:open script in your package.json file

"scripts": {
		"cypress:open": "node_modules/.bin/cypress open"
	},

Step 3: Now run `npm run cypress:open` to open cypress . This will open cypress application in your browser and also add cypress.config.js and cypress folder with some default tests in the root of your project.

npm run cypress:open

Let’s choose our options and select e2e( end to end ) testing .

Step 4 : Add your base(root) URL of your WordPress site and username and password in cypress.config.js ( Note This is only for testing purposes, we should not push our credentials publicly on Github etc )

const { defineConfig } = require("cypress");
module.exports = defineConfig({
	env: {
		wpUser: 'root',
		wpPassword: 'root',
	},
  e2e: {
	  baseUrl: 'http://localhost:8888',
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
});

You can also create your own test file called admin-login.cy.js in cypress/e2e folder, as shown below:

describe( 'Run a pull', function() {
	// Go to WordPress login page and login.
	beforeEach( function() {
		cy.visit( '/wp-login.php' );
		cy.wait( 1000 );
		cy.get( '#user_login' ).type( Cypress.env( "wpUser" ) );
		cy.get( '#user_pass' ).type( Cypress.env( "wpPassword" ) );
		cy.get( '#wp-submit' ).click();
	} );
	
	it( 'can run a pull', function() {
		cy.wait( 2000 );
		cy.url().should('eq', 'http://localhost:8888/wp-admin/');
	} );
});

Now let’s run this test by clicking on the admin-login.cy.js

Congratulations the login test is successful.

https://github.com/imranhsayed/aquila-features/pull/7

For more details check https://docs.cypress.io/guides/getting-started/

That’s all folks!