Setup And Run Cypress Tests With Your WordPress Plugin

Imran Sayed
3 min readSep 5, 2022

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!

--

--

Imran Sayed

👤 Full Stack Developer at rtCamp, Speaker, Blogger, YouTuber, Wordpress, React, Node, Laravel Developer http://youtube.com/ImranSayedDev