Issue #477 (Reflect Review, React, Git/CLI, Vue)09/08/22
The following intro is a paid product review for Reflect, an automated no-code platform for end-to-end regression testing.
For complex apps that are continuously receiving feature updates, testing is crucial. But, as many of you probably know, creating tests using code-based testing tools is not easy — even if you're using the most powerful code-based tools available today.
Code-based testing tools often suffer from the following problems:
- Using code to translate every step of a user's interaction with your app's UI is time-consuming
- Changes made to your app can easily break your tests
- Poor support for common actions like drag-and-drop or file-uploading
- No way to easily target UI flows built on modern technologies like Web Components or Shadow DOM
- Lack of ability to detect visual regressions
This is where Reflect comes in. Reflect is a no-code solution that aims to replace popular tools like Cypress, Playwright, and Selenium. With Reflect, you can create tests quickly and maintain them easily.
Let's take a look at Reflect's process for creating tests, so you can check out its features and decide if it's right for your team.
After signing up for their 14-day trial, I'm logged in and I have a access to a nice clean dashboard view where I'll store, manage, and run my tests:
Reflect's dashboard for managing tests
If I hit the Create Test button, I'm presented with some basic options in a modal dialog. Here I can name my test, add the URL I want to test, and select a device profile (Desktop, Tablet, or Mobile).
Creating a Test with Reflect
When those basic settings are in place, I can click the "Begin Recording" button to start creating the test. Reflect will open a live browser environment for me, starting from the URL I selected. Now I simply need to go through the steps of the user flow I want to test, and Reflect will record all my steps.
When I'm done, I can save the test and Reflect will give me the option to 'view' my recording. Here I can run the test as many times as I want, and I get a nice view of the recorded test along with a detailed list showing each step that was taken during the recording.
The List of Steps when Viewing a Reflect Test
I can click the "Tests" link at the top of my dashboard to view all the tests I've created (all plans allow unlimited tests). From there I can run any of the tests, search for tests by keyword, filter by passed/failed/running, and organize my tests into folders.
Tests listed in Reflect's Dashboard
What's really powerful and convenient about Reflect is that all test creation and test execution are done completely in the cloud. There's no need to install any software, no need to manage any kind of infrastructure — that's all taken care of by Reflect.
After a test is created, I can run the test as many times as I want, and I can set it up to run at specified times. This means I can continue deploying new code to my app and any tests I've created will run and I'll be notified if any test fails. If a specific test fails after I've deployed some code, then I'll know my new code broke something in the flow of that specific test.
Two really powerful features in Reflect are Segments and Visual Validation. With Segments, you can create tests that incorporate predefined step sequences so you don't have to constantly repeat those same steps for every test creation. Visual Validation allows you to validate a specific step based on something visual on the page that changes or appears.
For example, let's assume I'm one of the engineers at an e-commerce website, testing the full user experience of shopping on the website. I can create a "Segment" that consists only of the login process. This way, other shopping-based tests can simply include the login process as a Segment, without the need to repeat those login steps. Segments can be created for any repeated steps.
 |
Creating a Segment in Reflect
I can create a Segment when viewing an individual test by using the checkboxes next to the steps I want to save. Once they're saved as a Segment, I can use that Segment whenever I create a new test. I simply need to add that Segment to my test when I name and build a new test.
Adding a Segment to a New Test in Reflect
As you can see in the screenshot above, while creating my test, I have the option to add the "Login Process" Segment that I previously saved. Very useful and will save a ton of time!
In the midst of my login process, I might include a visual indicator that the login was successful. For example, an avatar loaded in the top-right area or maybe a username would "validate" that the login process was complete, thus passing that portion of the test.
The Reflect home page features a short demonstration video that highlights the above features and more, so I recommend checking that out so you can see all of this in action.
So far I've only discussed the primary features of Reflect: Creating tests and Segments. Some other features worth checking out are:
- Cross-browser Testing that allows you to run your tests in Chrome, Firefox, Safari, or Edge.
- Variables to define input values that might change on different test runs.
- Email / SMS Testing that enables you to validate that emails or text messages are sent or extract values out of the messages.
- Create Suites where you can store complete regression testing plans.
That should give you a good overview of this powerful tool that's also fun to use. And because this is a no-code tool, team members like Designers, Product Managers, and Customer Support can create tests with Reflect without any of the technical chops that other tools require. The documentation is excellent and should cover whatever you need to get started.
As mentioned, you can try out Reflect for 14-days before committing and you can check out details on features on their pricing plans page.
Now on to this week's tools!
