Many people don’t test their WordPress websites, and it’s a problem. While the core of WordPress is fairly well-tested by its creators, users, and the open-source community, the same cannot be said for every plugin and theme. There’s an infinite combination of versions, hosting environments, plugins, themes, and configurations. You can’t trust the community to catch every bug that could affect your website.
Applying automated UI testing to the public-facing pages of a WordPress website is just like testing anything else. However, there are as many plugins for the administration panel as for the public pages. In addition, you might be creating plugins and themes of your own that you want to test. This post will cover how to write WordPress browser tests that can log in to your WordPress admin, install plugins, and modify settings.
Table of Contents
Tips for Getting Started
Testing is an important part of the WordPress development process. Without it, you might miss bugs that block a positive user experience. Before you use Ghost Inspector to test your WordPress admin, here are a few tips to get started:
- We strongly suggest running tests on a WordPress testing/staging environment. However, if you need to test on production, then create a new user for UI tests. Instead of putting your username or password into the automated tests, create a specific user that you can easily disable or limit access. This will also help ensure your tests don’t break because you need to reset your password.
- Use private values for test input, especially passwords. That will prevent anyone viewing your tests from immediately seeing your WordPress login information.
- Use suite-level variables for things like username/password. That way, you only have one place to update if you need to change the password.
Get Started with Automated UI Testing for WordPress with Ghost Inspector
This will run you through plugin installation of Ghost Inspector, a WordPress automated UI testing tool. Our tests carry out actions in your web browser just like you can do manually to ensure your WordPress website works properly.
WordPress Plugin Installation
The following is a test we maintain for our official WordPress plugin. In this example, we’ll show you how to install a plugin from the official WordPress directory, activate it, modify its settings, and verify it’s displaying as expected. You should be able to use many of these same steps to test installing and modifying any plugin or theme.
Log in to WordPress Admin
Below are the steps for logging into any WordPress admin. You can import these exact steps into your own suite by downloading this Selenium IDE .html export (unzip before import).
What is this test doing? Step 1 is conditional, based on the current URL. If is not the WordPress login, it will Go to /wp-login.php.
Step 2 & 3 enter the username and password.
Step 4 submits the form and logs into the admin.
Step 5 asserts that the login was successful by checking that it’s on the Dashboard page.
That’s it! This test can be reused in other tests that need to log in first.
Check for pre-installed plugin
What’s happening here? Like any good test, we want to start with fresh data every time. Since this is testing that a plugin can be installed and activated, the test should always start without the plugin installed. But, because we are testing against a live site, the plugin might already be there. So this set of steps finds and uninstalls the plugin before doing anything else.
Step 1 imports the login steps we just covered.
Step 2 navigates to the plugins section of the admin.
Step 3 (and step 4) are conditional and only run if an element with our plugin slug (in this case, ghost-inspector) is found. This step deactivates the plugin. It is optional in case the plugin is installed but not activated. If you want to use this with your own plugin, simply change the slug and full name. This test is using both, but it could be simplified by only using one or the other.
Step 4 uninstalls the plugin. Note the use of aria-label and data-slug again. While these could change, they are pretty standard parts of WordPress, so they should remain for a long time.
Installing a plugin from the WordPress directory
In these steps, the test searches for a plugin by name, then installs and activates it.
Step 5 clicks the “Add New” button on the plugin page.
Step 6 searches for “ghost inspector” (replace this with any search term to find the plugin you want).
Step 7 installs the plugin using the class that WordPress applies to the plugin cards, in this case, .plugin-card-ghost-inspector.
Step 8 activates the plugin that was just installed.
Changing Plugin Settings
Now the test navigates to the plugin settings screen, updates some values and saves. These steps are specific to this plugin, but similar logic could be applied to other plugins or settings screens.
Step 9 clicks the Settings menu in WordPress.
Step 10 navigates to the settings page specific to this plugin.
Step 11 & 12 assign data to the various settings fields for the plugin.
Step 13 submits the form to save the settings.
Step 14 verifies that the settings were saved successfully.
Verifying plugin features
These final steps verify that the plugin is showing the expected output. This test is pretty basic, but could be expanded for a more complex plugin.
Step 15 navigates to the admin dashboard where our plugin widget is displayed.
Step 16, 17, & 18 verify some specifics about our plugin based on the settings we entered. Replace these with whatever business logic you need to test.
That’s it!
As you can see in the notes (TODO) there’s plenty of room for improving and expanding these tests. You’ll have to adapt these steps for your own needs, but hopefully, this gives you an idea of how to apply UI automation testing to your WordPress admin using Ghost Inspector..
Why UI testing is important for WordPress
When users visit your website, they’re interacting with your user interface, so if the experience isn’t high-quality, it can quickly diminish their first impressions of your website. This can mean losing users to a competitor.
In the development process, UI testing for WordPress is critical to maintaining a positive user experience and ensuring your website works as it’s supposed to. Although you can perform UI testing manually, automated tools like Ghost Inspector offer various benefits. Here are a few of them:
Automated UI testing increases efficiency
Manual UI testing is possible, but using an automated web UI testing platform like Ghost Inspector is the quickest way to test your WordPress website. By automating the UI tests makes it possible to run more tests in less time and with less effort than would be possible if you run the tests manually.
Typically, tasks like validating UI workflows, input fields, user navigation, and button testing are all manual tasks. Still, you can automate them with Ghost Inspector, saving your developers time to work on other important tasks and, as a result, saving you money.
Instead of testing and validating every UI element, we have automated test scripts for various scenarios. You can reuse these scripts later when you add or modify website code or features.
Automated UI testing improves website speed and reduces the margin of errors
When you test your website, you can test for all sorts of things like website speed, coding errors, accessibility, and more. Online users are increasingly impatient, and even a slight delay can cause them to click away from your website. Websites that take more than three seconds to load lose 53% of mobile users to other pages.
Automated UI testing can help to improve website speed by identifying and resolving bottlenecks that otherwise slow down the site. By running tests regularly, you can increase the odds that your website always runs at peak efficiency.
In addition, automated UI testing can help to catch coding errors that can cause slow loading times. By identifying and fixing these errors before the site goes live, you can assure users have a positive experience when they visit the site.
As a result, automated UI testing is an essential tool for any team looking to improve website speed.
Automated UI testing works out kinks in code
Running automated tests allows you to find bugs as soon as they are introduced into your website’s code, saving time and money on fixing bugs in the later stages of development.
A good automated UI test suite should consist of end-to-end tests covering all parts of the application and simulating user interactions. By ensuring that all parts of your website work correctly, you can avoid introducing errors into the system, which will help reduce bug count and increase both the quality and usability of your product.
Frequently Asked Questions about UI Automated Testing
What is UI automated testing?
UI automated testing is software testing that checks the user interface (UI) of a web application to evaluate its usability and overall quality.
What is UI testing for WordPress?
UI testing is a software testing technique that aims to check the usability of a WordPress site. UI testing can take many forms, but in most cases, it involves interacting with an application and recording what happens to catch bugs, quickly fix broken code, and improve overall website usability.
What is a UI automated testing framework?
An automation framework typically provides an environment for executing test plans and generating identical outputs. They are specialized tools that assist you with your regular test automation tasks. Test development and execution can be simplified using an automation framework, improving the automation tester’s workflow. Some frameworks include Selenium and, of course, Ghost Inspector.
Why use automated UI testing?
Automated UI testing is one of the best ways to ensure that your website or application is functioning correctly before releasing it to the public. It can help catch problems before they become major issues, such as a broken functionality or error message. It can also catch any technical errors, such as poor web design.
Conclusion
UI testing is an important part of website development. By ensuring a positive user experience, you can keep users on your website and improve your chances of converting them into customers. Have you performed any automated UI tests on your website? If not, consider reaching out to us for help. Our team of experts will work with you to ensure that your website provides a great user experience that reduces WordPress errors and improves your customer’s overall experience with your website.
