Common commands that can be used to create Cypress tests for WordPress
Add two entries in composer.json for an install-type and its path:
"installer-types": ["cypress-support"],
"installer-paths": {
"tests/cypress/cypress/support/{$name}": [
"type:cypress-support"
]
}
Make sure you also add that installed path to your .gitignore file. I.E. tests/cypress/cypress/support/cypress-wordpress-support-commands
In the support folder for where your Cypress tests are located, edit commands.js and add the
following:
// Import commands.js using ES2015 syntax:
import './cypress-wordpress-support-commands/commands'
Install the package using Composer:
composer require kanopi/cypress-wordpress-support-commandsLogin to WordPress admin. Uses 'cypress' user with 'cypress' password by default.
cy.login(); // Login as default user
cy.login('username', 'password'); // Login as specific userLogout from WordPress by clearing all cookies.
cy.logout();Sets the post/page title in the WordPress editor.
cy.setTitle('Test Title');Adds a heading component and sets text content. Generates random text if no content provided.
cy.createComponentHeading('My Heading Text');
cy.createComponentHeading(); // Uses random textAdds a paragraph component and sets text content. Generates random text if no content provided.
cy.createComponentParagraph('My paragraph text');
cy.createComponentParagraph(); // Uses random textAdds an image component and uploads a file. Files should be stored in the 'fixtures' folder.
cy.createComponentImage('image-sample_01.png');
cy.createComponentImage('image-sample_01.png', true); // Use media libraryOpens the component inserter and selects a component by name.
cy.selectComponent('Heading');
cy.selectComponent('Paragraph');
cy.selectComponent('Image');Clicks the page to deselect components and restore the "Add Component" button. Typically used after adding/editing components.
cy.editorReset();Clicks the publish button and publishes the post/page. Compatible with WordPress 6.9+ which uses the REST API for publishing.
cy.publish(); // Publishes and views post
cy.publish(false); // Publishes without viewingSaves the post/page as published content.
cy.save(); // Saves and views post
cy.save(false); // Saves without viewingSaves the post/page as a draft.
cy.saveDraft();Updates an existing published post/page.
cy.update(); // Updates and views post
cy.update(false); // Updates without viewingUploads a file directly to the media library. Files should be stored in 'cypress/fixtures/'.
cy.mediaLibraryAdd('sample.png');Opens media library modal and selects an existing media item by filename. Compatible with sites using the WP Media Folder plugin, which replaces the standard media grid with a folder-based view.
cy.mediaLibrarySelect('#field_media_assets-media-library-wrapper', 'sample.png');Uploads a file through the media library modal. Files should be stored in 'cypress/fixtures/'.
cy.mediaLibraryUpload('#selector', 'sample.png');Sets the featured image for a post/page. Files should be stored in 'cypress/fixtures/'.
cy.setFeaturedImage('image-sample_01.png');Sets the visibility option for a post/page. Options: public, private, password.
cy.setVisibility(); // Defaults to public
cy.setVisibility('public');
cy.setVisibility('private');
cy.setVisibility('password'); // Uses default password 'password'
cy.setVisibility('password', '123'); // Uses custom passwordVisits a WordPress edit page and waits for common AJAX requests to complete.
cy.visitEditPage('/wp-admin/post-new.php');
cy.visitEditPage('/wp-admin/post.php?post=123&action=edit');Executes WP-CLI commands through various environments (Docksal, Lando, DDEV, Pantheon, Tugboat).
cy.wp('cache flush');
cy.wp('user list');Tests that a URL returns a 404 response for anonymous users.
cy.anonUrl404('/private-post-url');Enters password for password-protected posts/pages.
cy.enterPostPassword('mypassword');