Web Tools #477 - No-code Tests, React Tools, Git/CLI, Vue

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:

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).

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.

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.

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.

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.

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!

React Tools

Loading Disco
A loading spinner effect that produces a subtle animated glow around a button or other element.

Mailing
Build, test, and send emails with React using Email templates made with React components that are based on MJML components that work across email clients.

React Rating
A zero-dependency, highly customizable React component that displays a rating widget (e.g. star-rating) and allows you to use any SVGs.

react-use
A collection of essential React Hooks under various categories, and technically a port of an older projects called libreact.

react-float-menu
A configurable smart floating menu for React that can be dragged around the screen and has nested sub menus.

react-easy-infinite-scroll-hook
A React hook that makes it easy to add infinite scroll to any component. Simple to integrate and supports vertical or horizontal scrolling.

Sample Code
A Chrome extension to copy any React component from any site or web app.

react-chat-elements
A set of React components that add chat-relate elements to your app (e.g. message list, buttons, popups, avatar, etc).

ReactPage
A smart and highly customizable WYSIWYG editor for React, written in TypeScript.

rc-progress
A progress bar component for React that can render as a line or circle.

On the Release Radar:

• ReacType – React prototyping tool now at version 13+
• React Simple Maps – React SVG maps now at version 3+
• Embla Carousel – React carousel component now at version 7+
• react-medium-image-zoom – Medium-like image zoom at version 5+
• React Joyride – Guided tours at version 2.5+

Git, GitHub, and CLI Tools

The ProGuard Playground Challenge
Want to test our rule visualizer to potentially win a $100 Udemy course? Our ProGuard 20th anniversary celebration continues with challenges and prizes! Try the first of five challenges on the Guardsquare Community today.      SPONSORED 

Vale
A Go-based, fast, cross-platform command-line tool that brings code-like linting to prose.

Recode
A CLI to create remote development environments in your cloud provider account in seconds.

Useful Forks
An online tool and a Chrome extension that improves GitHub's Forks list discoverability through automatic filtering.

multi-gitter
A Go-based CLI to update multiple repositories simultaneously.

Artemis
A command-line utility that displays an GUI for your code, based on comments that you add to the code called "anchors".

First Pull Request
A neat little online tool that shows you the first ever pull request sent by any GitHub account. Pick your favourite developer and see what they were up to in the late 2010s!

Awesome GitHub CLI Extensions
A small collection of categorized extensions for the GitHub CLI.

octokit.js
The all-batteries-included GitHub SDK for browsers, Node.js, and Deno.

Viddy
A modern `watch` command written in Go with Time Machine mode, Vim-like keymaps, and more.

changelogithub
Generate a changelog for GitHub releases based on a project's "Conventional Commits", powered by changelogen.

Azure Developer CLI
A developer CLI that provides a set of developer-friendly commands to accelerate the time it takes for you to get started on Azure.

Vue Tools

The ProGuard Playground Challenge
Want to test our rule visualizer to potentially win a $100 Udemy course? Our ProGuard 20th anniversary celebration continues with challenges and prizes! Try the first of five challenges on the Guardsquare Community today.      SPONSORED 

Vue Grid Layout
A grid layout system for Vue.js, similar to an old project called Gridster.js and heavily inspired by React-Grid-Layout.

vue-tel-input
An international telephone input component for Vue, with support for Vue 3.

slidev-component-poll
A poll component for Slidev, the presentation slides library for Vue.

vue.draggable.next
A Vue 3-compatible drag-and-drop component based on Sortable.js.

Vue Starport
A Vue component that allows you to animate a component when navigating across routes.

LunchboxJS
A custom Vue 3 renderer for Three.js, like react-three-fiber for Vue.

VueTube
A Vue-based app that provides a simple and open-source video streaming client that's customizable and themeable.

vue-bind-once
A tiny, SSR-safe Vue directive for binding random data to an element.

vite-plugin-notifier
Get visual feedback that HMR has completed, and it only runs in dev mode.

vite-plugin-vue-server-ref
Share state between clients and Vite server.

Commercial Apps and Classifieds

These are commercial apps (i.e. not free or limited free plan), paid classifieds, and affiliate links.

DbVisualizer – A database client to connect to nearly any database.

uipkg – Figma plugin to export Figma designs as React components.

Refind – Get seven links every day based on your interests.  AD

UpBox.me – A file sharing service and platform with 1GB storage free.

Morning Brew – The latest business and tech news delivered daily. AD

You need a wiki – Easily create a wiki with Google Docs for your team.

Airplane – A developer-centric approach to building internal tools.
 

A Tweet for Thought

Finally a real Rockstar developer! Now if only I can get Rivers to subscribe to this newsletter...
   

Send Me Your Tools!

Made something? Send links via Direct Message on Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
 

Before I Go...

Here's a unique mobile game: ColorAround.xyz. The goal is to find the most accurate color in your environment with your camera and score as many points as possible in the least amount of time.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly
PayPal.me/WebToolsWeekly