If you are a developer with junior level (or above) javascript experience, you can use automated functional testing to simulate user interaction with your test site. Follow these instructions to test against a site you have running locally in which you have enabled the regular Drupal login.
In this article:
- Getting Started with Cypress for Local Testing
- Writing Your First Test
- Storing Your Tests
- Creating Custom Commands
- Related Articles
Getting Started with Cypress for Local Testing
- Create a config file for Cypress:
- cp ./cypress/config/default.env.config.js ./cypress/config/env.config.js
- Set the values in the newly created env.config.js:
- Set the baseUrl to the url your local site can be accessed by.
- In the env object set umn_sso to false and set base_drupal_node to the machine name of your basic page node.
- Adjust what specs to run in the specPattern array. You can use glob patterns here.
- You may want to comment out the Folwell glob on line 15 if you are not using Folwell Components.
- Run npm run cy.
- This will prompt you for a user name and password that will be used to log into the site.
- You will next be prompted for which way to run the tests.
- Headless: This runs the tests in a headless browser and only shows the console output.
- Visual: This runs the tests in a browser it will open so that you can watch them run.
- Open Visual Dashboard: This will open the Cypress GUI which will allow you to run specs selectively (this is good to use when writing tests).
Writing Your First Test
Writing assertions that make up a test are relatively straightforward. Assertions are made by stringing together methods in a way similar to JQuery.
- Cypress has good guide to get started with: Your First Test with Cypress
- Cypress API
Storing Your Tests
The cypress/e2e/custom folder exists for site owners to place their custom tests in. There is a simple test to use as a starting point named example.cy.js. You could create your tests in a new folder if you wish. The main purpose of this folder is to avoid merge conflicts when pulling in changes from the upstream repo.
Creating Custom Commands
You can place custom commands in the /cypress/support/custom.js file. Custom commands are simply methods to place reusable logic in order to simplify your tests. You can see some that have been made in the /cypress/support/commands.js file to assist with writing tests for Drupal's admin interface.