Reflect

The Next Chapter: Why we are excited to join SmartBear

Mon, 01 Jan 0001 00:00:00 +0000

Joining SmartBear

When my co-founder Fitz and I set out to build Reflect five years ago, we had a vision of building a product that makes testing faster, easier, and more efficient for software teams. It’s been an amazing journey.

Today, we’re thrilled to announce that Reflect is joining forces with SmartBear, a respected and well-known leader in products for software development, testing, and developer visibility. This acquisition will accelerate our shared mission to improve the state of testing, and ultimately to shape the future of software development.

Lightning's Chaos, Thunder's Speed: The Illusion of 'Using the Platform' with LWC

Mon, 01 Jan 0001 00:00:00 +0000

Lightning Web Components

The Lightning Web Components UI framework uses core Web Components standards and provides only what’s necessary to perform well in browsers. Because it’s built on code that runs natively in browsers, the framework is lightweight and delivers exceptional performance. Most of the code you write is standard JavaScript and HTML. via lwc.dev

Lightning Web Components (LWC) is a framework developed by Salesforce to build web applications. It is meant to be a replacement for their older “Aura” framework, and justifies its existence a number of ways. All of these justifications stem from the thinking that “using the platform” delivers better performance, greater portability, and more predictability. If you’ve built software that runs in modern browsers, you already know how LWC works! They’re simply providing some thin wrappers that help solve common problems faced when building webapps, along with tooling that prioritizes writing code that uses the Salesforce platform. From a Salesforce developer’s perspective, this may appear to be the case. In general, code that’s written to conform to the LWC standard looks just like code you’d write without any framework at all and delivers on functionality the browser supports out of the box (scoped styles, reusable “components”, templates, slot, etc).

Reflect AI: The Next Step in Automated End-to-End Web Tests

Mon, 01 Jan 0001 00:00:00 +0000

The Problem with Code-based Test Automation

Reflect is a platform for building and running automated regression tests for web applications. The allure of automated end-to-end tests is straightforward because the alternative is manual testing, which is slow and error-prone. Automated tests increase development velocity by executing quickly and producing structured results. However, the challenge historically with automated tests for the web was that the tests had to be expressed in code, which means that a programmer had to build them. More importantly, though, since the tests were in code, they were by definition syntactically specific and exact to the underlying structure of the webapp. This specificity causes major frustration for the tester when the underlying structure of the application changes and the tests break, despite the application’s user-visible functionality being identical. As a result, code-based test automation is inherently flaky and not resilient.

Testing emails using Cypress

Mon, 01 Jan 0001 00:00:00 +0000

More and more web apps have adopted automated emails to interact with users. These emails play a key role in the user journey. Thus, a bug in one of these email workflows can represent a serious problem for the reputation of your web application.

In this tutorial, you will learn how to create a script to test an email workflow using Cypress. Specifically, you will see how to fill out a passwordless form in a Cypress script, wait for the authentication email, extract the authentication URL, and use it to log in to a web application.

How Reflect uses WireGuard to test non-public web applications

Mon, 01 Jan 0001 00:00:00 +0000

Introduction

Many businesses have private applications that are not publicly-accessible on the Internet. These applications are generally used by employees, but sometimes external partners might use them as well. To access the applications, the user is generally within some restricted boundary of the organization’s network.

Despite users of these applications having a formal and friendly relationship with the provider, the applications themselves are still often mission-critical. This means that the cost of a bug in these applications can be quite high, and there is a strong incentive to thoroughly test new application versions before releasing them.

Accessing pseudo-elements in Playwright

Mon, 01 Jan 0001 00:00:00 +0000

Pseudo-elements are one of the stranger constructs supported in the HTML and CSS specs. Pseudo-elements don’t just modify the styling of an existing element, but can also add content to the page. But unlike a normal element, pseudo-elements are not considered a distinct node within the Document Object Model (DOM) and thus cannot be accessed through the querySelector or querySelectorAll.

Because of these pecularities, pseudo-elements can be quite difficult to test in an automated way, lack native support in many testing libraries including Microsoft’s popular Playwright testing framework. In this article we’ll show you how you can workaround these limitations to test pseudo-elements in Playwright.

Introduction to vue-test-utils

Mon, 01 Jan 0001 00:00:00 +0000

Introduction

If you use Vue.js, then you’ve likely come across the need to test components. This article introduces vue-test-utils - a suite of helper functions that improve overall development & testing experience with Vue applications.

In the book Extreme Programming Explained, Kent Beck recommends to “test everything that could possibly break.” This goal is quite difficult to achieve, but the closer we get to achieving it roughly maps to how effective our approach to testing actually is. Software testing approaches can be split into two categories: manual testing and automated testing. With manual testing, a developer tests their app as if they were an end-use rto ensure that the changes they’ve made are working as expected. With manual testing, every time you make a change you’re either going to need to re-test both new and existing behavior, or have confidence that the change you made has not left anything in a broken state.

Guide to testing Angular apps

Mon, 01 Jan 0001 00:00:00 +0000

Introduction

Angular is one of the most popular frameworks for creating web applications. Angular is designed to be a “batteries included” framework, meaning that many of the things you’d need to build and maintain a web application are included with the framework.

In this article, we’ll cover how you can start implementing the following types of tests in Angular:

Unit tests
Component tests
End-to-end tests

Let’s get started!

Setting up our Angular project

When you initialize an Angular project with the ng new command, Angular defaults to setting up Jasmine which is a popular library for unit testing. However Angular does support the use of alternative unit testing libraries. For example, you could instead opt to use Jest, a unit testing library developed by Facebook which is very popular in the React community. In this article, we’ll assume that you’re using the default library: Jasmine.

Introduction to Ladle

Mon, 01 Jan 0001 00:00:00 +0000

Introduction

Ladle is a tool for developing, testing, and documenting large-scale React apps. Large-scale React apps are hard to manage, test, and develop because of the overhead of working with a bloated application. Ladle allows you to isolate your React components in an environment where you can test and develop them independently.

If you’ve heard of or used Storybook before, Ladle is a highly performant alternative to Storybook. The best part is it supports Component Story Format right out of the box; hence your Storybook application will work the same way with Ladle. It was developed as a drop-in replacement for Storybook without any external configurations.

Guide to creating your first Cypress test

Mon, 01 Jan 0001 00:00:00 +0000

Looking to create automated tests for your web application? In this guide we’ll walk through how to install and create your first tests using Cypress, an end-to-end testing framework.

Installing Cypress

There are two ways to install Cypress: via the command-line using npm, or by using one of the standalone installers provided for Windows, macOS, and Linux at https://www.cypress.io/. The standalone installer has some limitations, including not being to view the results of your Cypress tests online, so we recommend installing Cypress via npm.

Testing drag-and-drop workflows in Cypress

Mon, 01 Jan 0001 00:00:00 +0000

Introduction

From the introduction of the mouse to the ubiquity of touchscreens in modern computing, the way we interact with devices keeps evolving. One key user interaction that is found throughout these evolutions is the drag-and-drop action. Within web applications, there’s two main reasons for the popularity of drag-and-drop:

Web applications are now more popular than traditional desktop apps, taking on more of the interactive features of their predecessors, including drag-and-drop functionality.
The Web is now mobile-first, which means you are supposed to support mobile-native interactions such as swiping.

In this article, you will learn how to test drag-and-drop workflows with Cypress. Specifically, you will see how to test drag and drop in a Cypress script, both with the cypress-drag-drop plugin and custom JavaScript logic.

How to deal with StaleElementReferenceException in Selenium

Mon, 01 Jan 0001 00:00:00 +0000

In Selenium, a WebElement is a reference to an HTML element within the Document Object Model (DOM) of a web page. In Java, when you interact with a WebElement that is no longer associated with an HTML element within the DOM, Selenium throws a StaleElementReferenceException. This exception is pretty common in web apps that are based on client-side frameworks, such as React. This is because React uses its own “virtual DOM”, which is a lightweight JavaScript representation of the actual DOM, and continually sends batched DOM changes from the virtual DOM into the actual DOM.

How to fix an InvalidSelectorException in Selenium

Mon, 01 Jan 0001 00:00:00 +0000

In Selenium, a selector, which is also called a locator, is what’s used to identify elements within a web page. Selenium supports two types of selectors: CSS selectors, and XPath selectors. In Java, when an invalid CSS or XPath selector is malformed, Selenium throws an InvalidSelectorException. This exception represents one of the most common Selenium exceptions, and chances are that you’ve already encountered it if you’ve used Selenium for any length of time.

How to mock API requests in React tests with Mirage JS

Mon, 01 Jan 0001 00:00:00 +0000

In modern web development, frontend and backend developers typically end up integrating their respective code at the API layer. While there are many benefits to true end-to-end regression tests, having test coverage that uses mocked API calls can provide a number of benefits as well, including increased stability and faster execution time.

This article will discuss how you can leverage Mirage JS to mock backend services in tests for your React applications. We’ll provide an overview of Mirage, followed by a step-by-step guide that creates tests against create-react-app’s example “TODO” application.

Guide to Safari Developer Tools

Mon, 01 Jan 0001 00:00:00 +0000

Despite the fact that Safari is so popular amongst users, web developers often forgo testing in Safari and instead test solely in Google Chrome. It’s understandable; Chrome has a huge lead in marketshare and has invested a lot of effort in making their developer tools easy to use. What you may not know is that Safari also includes a fully-featured development toolkit that has feature-parity with the major features found in Chrome Dev Tools.

UI Testing with Postman

Mon, 01 Jan 0001 00:00:00 +0000

Postman is a popular tool for API testing, but did you know that you can also use it for UI testing? In this article we’ll cover how to use Postman to create end-to-end tests for a few simple testing scenarios.

What is Postman

Postman is a testing platform for developing, testing, and documenting APIs. You can think of Postman as an alternative to writing automated tests in a library like Python’s Requests HTTP library, or JavaScript’s Axios library. Postman is also a great alternative to writing one-off scripts using command-line tools like curl and jq.

How to test drag-and-drop interactions in Playwright

Mon, 01 Jan 0001 00:00:00 +0000

The way we interact with devices is constantly evolving. The mouse and then touchscreens introduced new forms of interaction, and one of the most popular is drag and drop. This involves dragging an object on the screen from point X to point Y.

Two phenomena have led to an increased prevalence of drag-and-drop interactions:

As web applications continue to replace traditional desktop apps, they have taken on more of the interactive features of their predecessors, including more drag-and-drop functionality.
The web is increasing mobile-first, which makes it critical to support mobile-native interactions such as swiping.

In this article, you will learn how to test drag-and-drop interactions with Playwright. In detail, you will see how to test drag and drop in a TypesScript script, both with Playwright’s drag-and-drop API as well as with custom logic.

Testing pseudo-elements in Cypress

Mon, 01 Jan 0001 00:00:00 +0000

Ever needed to make an assertion on a pseudo element in a Cypress test? It’s not as straightforward as you might expect. Trying to access a pseudo element with cy.get(pseudoElementSelector) will fail, and if you can’t access it, how can you test it? In this article, you’ll learn how to access pseudo elements so you can test them in Cypress.

What’s a pseudo-element?

As you can tell from the name, a pseudo element isn’t really an HTML element. It’s a CSS selector that allows you to target a part of a real element’s content, or to insert CSS-defined content before / after the element’s content. The most popular examples of pseudo elements are ::before and ::after (which allow you to insert content), although there are a lot more, like ::first-line, ::first-letter, and ::marker.

Using Postman to test SOAP web services

Mon, 01 Jan 0001 00:00:00 +0000

Nowadays most server-to-server communication over HTTP is done via REST APIs that use JSON as its serialization format. However, if you’re working with applications that integrate with any legacy systems, you may find yourself needing to communicate via the SOAP messaging standard.

In this article, we’ll walk through how to test SOAP services using a popular API testing tool called Postman. But first, let’s cover some of the key things to know about SOAP.

Testing mobile web apps in Cypress

Mon, 01 Jan 0001 00:00:00 +0000

Introduction

Nowadays, the importance of mobile traffic should not be underestimated. Statistically speaking, it is more likely that you’re reading this article on a mobile device than on a desktop device. This fact has not only a huge impact on adapting the contents of a website to both mobile and desktop devices, but also for how to test a web application being rendered on mobile devices. This article will give you an overview of the distribution of the internet traffic between mobile and desktop devices and how to test web applications on mobile devices using Cypress.

Using Playwright for API testing

Mon, 01 Jan 0001 00:00:00 +0000

Starting in version 1.16, Playwright introduced the APIRequestContext class which allows users to make API calls and create assertions for various aspects of the HTTP response. API calls in Playwright are flexible: they are made outside of the browser runtime but can optionally share the cookie state of the browser runtime. This means that you can create both standalone API tests in Playwright, as well as make API calls intermingled with UI actions like clicks and inputs. There are two situations in particular where you might want to incorporate API testing as part of an end-to-end test:

API testing in Cypress

Mon, 01 Jan 0001 00:00:00 +0000

APIs form the foundation of most modern-day web applications, delivering data to the client-side code which is then parsed and rendered in the UI. Since most UI interactions operate on data retrieved from an API, you can think of end-to-end tests (i.e. tests that use your UI to replicate user workflows) as implicitly testing your API as well.

There are definitely cases where we’ll want to write tests against our APIs directly, but when thinking about doing API testing in addition to end-to-end testing, a key principle to consider is to avoid duplicative tests. We provide the following advice in our regression testing guide:

How to automatically generate social share images for your blog

Mon, 01 Jan 0001 00:00:00 +0000

Encouraging your readers to share your blog posts on social channels like Reddit, LinkedIn, Twitter, and Facebook is a great way to increase your audience. But with so much content being shown to social media users, how do you ensure your content cuts through the noise?

One way to increase engagement is with high quality imagery. A recent study showed that Facebook posts that contained images have 2.3x more engagement compared to posts without images.

Creating automated tests for Safari and WebKit

Mon, 01 Jan 0001 00:00:00 +0000

Safari is the default browser for all Apple devices, and is the second most popular web browser worldwide. Despite its popularity, building test automation to run on Safari or its underlying WebKit engine remains difficult, especially compared to the relative ease of other popular browsers like Chrome, Firefox, and Edge.

In this article, you will learn about some challenges faced by developers who want to automate testing in Safari. Additionally, you’ll read about what currently works to automate testing in Safari, and what is still lacking. Finally, you will explore some options for continuous integration and virtualization of the MacOS platform to help automate your Safari testing.

Introduction to Remix

Mon, 01 Jan 0001 00:00:00 +0000

What is Remix?

Remix is a full stack web application framework with some unique design decisions centered around application performance, developer experience, and portability. It’s part of a recent trend around JavaScript frameworks that move most rendering and logic off of the client and into the server. Remix in particular encourages developers to deliver as little JavaScript to the client as possible.

Starting with the advent of AJAX and increasing through the introduction of front-end frameworks like React and Angular, web applications have seen more and more server-side functionality being moved into client-side JavaScript code. For the frontend of a typical web application, things like template rendering, handling data mutations, handling routing (e.g. functioning as an SPA), and fetching data from the backend API are all now responsibilities of the frontend.

Testing two-factor authentication with Cypress

Mon, 01 Jan 0001 00:00:00 +0000

Introduction

Two-factor authentication (2FA) adds an extra layer of security to web applications by verifying a secondary credential beyond the user’s username and password. Common methods for issuing a two-factor challenge include: sending an email, sending an SMS, or requiring the user to enter a “time-based one-time password (TOTP)” via a mobile app like Google Authenticator or Authy.

This article will cover how to automatically test these scenarios using Cypress, with a working code example for testing email-based authentication.

Simulating hovers in Cypress

Mon, 01 Jan 0001 00:00:00 +0000

Despite being among Cypress’s most requested features, native support for triggering hover actions remains unsupported in Cypress. In other words, there’s no cy.hover() command that you can call to get the element to act like you hovered over it. If you try to use cy.hover(), you’ll get a detailed error message that looks like the one below:

Not to fear: in this article we’ll cover several different workarounds that allow you to test end-to-end scenarios that require hover actions.

Introduction to the T3 stack and create-t3-app

Mon, 01 Jan 0001 00:00:00 +0000

There are many JavaScript frameworks and libraries, and people often joke that we might have way too many of these tools. If you’re building a web application, you’re likely going to need to implement basic functionality like user authentication, database access, and a responsive mobile-friendly UI. The right frameworks and libraries can make these table-stakes features a lot faster and easier to implement.

What if just one tool helps you bring everything you’ll need to build a feature-rich application fast? Well, create-t3-app does just that. So in this guide, I’ll walk you through the essentials of create-t3-app and cover its similarities and differences with the more well known create-react-app utility.

Visual testing in Playwright

Mon, 01 Jan 0001 00:00:00 +0000

As programming libraries, and frameworks continue to evolve, so do effective testing strategies. One aspect of testing that has gained popularity in recent years is visual testing.

Visual testing verifies that updates to an application have not caused any unexpected visual changes that would be perceived as a bug by an end user. In this article, you will learn how to create a visual regression test based on the screen comparison features with the Playwright test framework. Specifically, we’ll cover how to script Playwright to visit a website, take a screenshot, and compare it to the screenshot of a known-good screenshot of the website in order to detect any visual changes.

Testing Shadow DOM elements in Selenium

Mon, 01 Jan 0001 00:00:00 +0000

Introduction

Shadow DOM is a relatively new addition to the W3C spec which enables web developers to create isolated and reusable components. While there are major benefits to using Shadow DOM, one of the historic drawbacks has been poor testing support.

In this article, we’ll cover how to access and manipulate Shadow DOM elements within Selenium tests, both via the new native support for Shadow DOM in Selenium 4, as well as using workarounds that are compatible with older versions of Selenium.

Introduction to RedwoodJS

Mon, 01 Jan 0001 00:00:00 +0000

RedwoodJS is one of several new full-stack web frameworks in the JavaScript ecosystem. It’s designed to be easy to pick up, but equally easy to scale from a small side project to a fully-fledged startup.

RedwoodJS combines several popular libraries into a single all-in-one framework, as well as implements its own features to make the process of building and maintaining applications easier. This includes the RedwoodJS CLI, as well as helpful features like route-based code-splitting.

How to run Selenium tests inside a Docker container

Mon, 01 Jan 0001 00:00:00 +0000

As you probably know, Selenium is a popular open-source library for creating automated tests. But did you know that Selenium does not operate as a single standalone tool? It’s true! When you’re running even a simple Selenium test, you’re actually using three separate executables:

The Selenium script itself, which is running within a programming runtime like Java or Python.
A WebDriver executable which serves as the integration layer between Selenium and a target browser. Each browser that integrates with Selenium (Google Chrome, Opera, Safari, and Firefox) has its own version of WebDriver that translates Selenium API calls into browser actions.
The browser process itself, such as Google Chrome or Apple Safari.

Because of the complexity of running multiple executables, as well as due to the frequency of updates necessary to keep up to date with the latest browser versions, having an automated process for installing and upgrading these three components can be a huge time-saver. This is where Docker comes in!

Introduction to Bun

Mon, 01 Jan 0001 00:00:00 +0000

Bun is a new runtime for JavaScript and TypeScript applications. Created by Jarred Sumner, Bun has undergone rapid development since its inception in early 2021, and saw its first beta release in July of 2022.

Bun aims to provide an “all-in-one” runtime for building JavaScript and TypeScript applications. Bun’s built-in bundler replaces the need for Webpack or esbuild, and supports a variety of file-types including Javascript, Typescript, tsx, jsx, css, and svg. Bun also includes a built-in web server for use in local development, which eliminates the need for a plugin like webpack-dev-server. Additionally, common web APIs like fetch and WebSockets are included in its standard library. Bun also implements the Node module resolution algorithm, which makes migrating applications from Node easier when compared to another alternative runtime like Deno.

Testing HTTP Basic Authentication in Selenium

Mon, 01 Jan 0001 00:00:00 +0000

Introduction

HTTP Basic Authentication is an authentication method that’s built into the HTTP spec. It can be a very easy means of implementing authentication on a web application, and is a common way to secure non-production environments like QA and Staging environments without having to add an application-level auth mechanism.

Browsers have built-in support for supporting HTTP Basic Authentication. When a browser request receives an HTTP 401 Unauthorized response code, together with a WWW-Authenticate: Basic realm="<realm>" response header field (where <realm> can be any user-defined string), it will automatically prompt the user to enter a username and password. When the user enters their credentials, the request will be re-issued with the credentials passed via an Authorization request header and, if the credentials are correct, the user will be authorized to access the protected page.

How to test SMS workflows in Selenium

Mon, 01 Jan 0001 00:00:00 +0000

Many web applications now rely on your phone number for authentication or to deliver critical information. Specifically, these applications tend to send SMS messages to your personal phone number. Considering how rarely a person changes their phone number in life and how much we check our phones, SMS messages are one of the best ways to authenticate a user, get in touch with them, or communicate something urgent.

One of the most common workflows where automatic SMS is used is when a user logs in to a service. If two-factor authentication is enabled, an automated SMS containing a secure code is sent to the phone number of the user. Similarly, automated SMS workflows are used when a new user registers with an online service. Registration forms frequently ask for a personal phone number. After signing up, you will be asked to confirm your phone number via an automated SMS that contains a short verification code (often called a one-time password or OTP).

Introduction to Astro

Mon, 01 Jan 0001 00:00:00 +0000

Astro is a new static site builder that allows you to build static sites with your favorite frameworks like React, Svelte, Vue, Preact, and Solid. Static site builders or generators are frameworks that make web applications on top of UI frameworks into full static HTML content.

Most of them ship JavaScript to the client-side for further client-side interaction on a web page, but Astro, by default, renders directly to HTML and CSS, shipping as little JavaScript as possible to the client, which can result in faster load time.

How to save and load cookies in Selenium WebDriver

Mon, 01 Jan 0001 00:00:00 +0000

Introduction

From the user’s point of view, cookies and the related cookie banners can sometimes be annoying. However from the developer’s perspective, cookies are a convenient way to easily store session and user related information. Just imagine a scenario where users login to a web page and the login state wouldn’t be stored. Everytime the web page would be reloaded, the users would have to log in again. The same problem also occurs when you’re testing your web app automatically using Selenium WebDriver. The coding effort and the test execution time would unnecessarily increase if cookies couldn’t be stored/loaded automatically.

How to save and restore state in Cypress tests

Mon, 01 Jan 0001 00:00:00 +0000

Sharing state across multiple tests is considered a bad practice. Consider the following passage from Cypress’s “Best Practices” docs:

You only need to do one thing to know whether you’ve coupled your tests incorrectly, or if one test is relying on the state of a previous one. Change it to it.only on the test and refresh the browser. If this test can run by itself and pass - congratulations you have written a good test. If this is not the case, then you should refactor and change your approach.”

Fixing Cypress cross-origin errors

Mon, 01 Jan 0001 00:00:00 +0000

Introduction

Although older versions of Cypress did not support testing across domains, with the addition of cy.origin() in version 9.6, tests can now be created that span multiple domains.

In this article, we will cover how to create cross-domain tests with Cypress using the new cy.origin() and cy.session() functions, and identify some limitations with these new commands that you may run into in your own testing.

What is Cypress?

Cypress is a JavaScript-based end-to-end testing framework for browser-based applications. Due to its tight integration with the browser, it is possible to use browser-based tools like Chrome Dev Tools and popular browser extensions like React Dev Tools to debug Cypress tests. The fact that you can use familiar tools when building tests is one of the reasons that Cypress is popular with developers. Cypress offers several testing features including: automatic waiting (to avoid timing issues), integrated debugging and stack tracing, snapshot support, network traffic control with the possibility to see DOM elements, cookies, local storage items and more.

React State Management with Recoil

Mon, 01 Jan 0001 00:00:00 +0000

React State Management

React comes out of the box with state management in the form of Hooks. Hooks provide a functional programming approach to create, update and maintain state. We can visualise how Hooks work by considering the state of a simple Counter application:

In the example above, a Counter component keeps a running count. The Counter has a default state of zero, which is what is initially displayed to the user. After some user interaction (e.g. clicking a button), a state change will be triggered and the internal state will change from 0 to 1. This in turn will trigger a re-render of the UI. Note that this is perhaps the simplest example of state management within an application. Real-world applications typically have a much larger and more complicated set of internal state.

Testing email workflows with Selenium

Mon, 01 Jan 0001 00:00:00 +0000

Many web applications have functionality that generates automated emails. These emails often represent critical parts of a user’s journey through the application, and any bugs affecting them could have serious negative implications.

One of most common workflows where automated emails are used are new user registration scenarios. Often after signing up for an account, you’ll be asked to confirm your email address via an automated email that sends a confirmation email or by entering a short verification code (which is sometimes called a one-time password or OTP for short).

How to test file uploads in Selenium

Mon, 01 Jan 0001 00:00:00 +0000

Introduction

Testing workflows that include a file upload step can be quite difficult to automate. Popular testing tools like Selenium lack the ability to test file uploads out of the box, but luckily there are third-party tools that make automatically testing file uploads possible.

In this article, we’ll cover how a third-party tool called AutoIT can be used in combination with Selenium to build end-to-end tests that include file upload functionality.

Introduction to Chrome DevTools Protocol

Mon, 01 Jan 0001 00:00:00 +0000

Introduction

Chrome DevTools Protocol (CDP) is a set of APIs that allows developers to communicate with Chromium-based browsers, including Google Chrome. CDP was originally developed to power the Developer Tools features within Chrome, but since its introduction its usage has extended to much more than this initial use-case.

In this article, we’ll provide some practical examples for interacting with the Chrome DevTools Protocol, as well as cover how some popular testing libraries utilize CDP.

Comparing screenshots in Cypress

Mon, 01 Jan 0001 00:00:00 +0000

A failed test is ten times better than failed code. - Anonymous Developer

On a more serious note, as a developer, embracing the practices of test-driven development (TDD) and test automation will do you a lot of good today and the day after. Although the purpose of this article is not to preach to you about TDD, I will instead be taking you through one of the most popular tools there is in Javascript Land when it comes to writing automated tests - Cypress.

Accessing a new window in Cypress tests

Mon, 01 Jan 0001 00:00:00 +0000

Introduction

When you find yourself in the process of developing a more complex web page, you’ll surely come across a situation where the users click on buttons/links that will take them to a new tab or window. While it is straightforward to code such a button/link, testing this behavior can be quite a bit more difficult. Cypress, for instance, doesn’t have native support for accessing a new window or browser tab.

Introduction to Nuxt Test Utils

Mon, 01 Jan 0001 00:00:00 +0000

Nuxt is a free and open-source JavaScript library built upon Vue that allows you to develop server-rendered web applications. Nuxt Test Utils is a test utility library for Nuxt.js for creating tests for Nuxt projects and modules. It offers several helpful methods for testing Nuxt applications, writing browser tests, and validating module test results.

What is Nuxt Test Utils?

nuxt/test-utils is a test utility library for Nuxt.js that allows you to create tests easily for Nuxt projects and modules. It provides several useful functions and methods for testing Nuxt applications, writing browser tests, and validating the module’s test result.

What is Selenium WebDriverManager?

Mon, 01 Jan 0001 00:00:00 +0000

Selenium is one of the most well-known technologies in the software testing space. With built-in support for all major browsers, Selenium is a powerful tool for building automated tests that can be run in a variety of environments.

In order for Selenium to communicate with a browser, the browser needs to implement something called a WebDriver. This is the interface that defines how Selenium can execute various operations within the browser, like clicks and text entries. Each major browser has its own WebDriver implementation that is updated with every major browser release. The communication protocol between the Selenium runtime and the browser’s WebDriver is known as the WebDriver API. The WebDriver API is the only standards-based communication protocol across browsers and is defined in a W3C Spec that is written and updated by representatives from browser vendors, tool vendors, and the open-source community.

Strategies for handling async code in Cypress

Mon, 01 Jan 0001 00:00:00 +0000

It can be difficult to determine what is executing synchronously vs asynchronously within a web application. Static assets in the page, such as images, CSS, and other media, are requested in order but can be processed either synchronously or asynchronously depending on the type of asset it is, and how it’s defined within the page. Cascading style sheets (CSS) are evaluated synchronously by the browser, but images, fonts, and videos referenced inside the CSS are loaded and display asynchronously. Meanwhile, JavaScript exposes a single-threaded, asynchronous programming model to the developer, but is executed in the order it appears on the page unless otherwise specified by the developer.

Deno's Networking and File Permissions Model

Mon, 01 Jan 0001 00:00:00 +0000

What is Deno?

Deno is a secure Typescript runtime that aims to replace NodeJS for JavaScript users. Deno aims to be a secure computing platform, and as such has a permissions model that forces all scripts to be executed within a sandbox. This is done to protect both you, the developer, and any user of your script from running into any of the common security issues found with NodeJS. Deno essentially makes your environment immutable to any changes, unless you explicitly change its permissions.

What is Deno Deploy?

Mon, 01 Jan 0001 00:00:00 +0000

Deno is a new runtime environment for JavaScript, TypeScript, and WebAssembly designed to be simple, secure, and efficient. Deno is built on the V8 JavaScript engine and the Rust programming language. Deno aims to be a more modern runtime than Node.js, with better security, performance, and developer productivity support.

Deno Deploy is a platform that makes it easy to deploy your Deno applications. It handles all the details of setting up a production-ready environment, so you can focus on writing your core business logic.

Installing ChromeDriver and Python Selenium

Mon, 01 Jan 0001 00:00:00 +0000

Introduction

Automated testing is an essential part of web development that massively increases productivity in a team. By outsourcing the repetitive task of testing our web applications to computers, we free up more time to work on shipping features while ensuring a bug-free experience for our users.

With this in mind, we’ll be exploring how to use one of the most capable automated testing tools, Selenium, to run a sample automated test using the WebDriver API on a live page.

Everything you need to know about NoSuchElementException in Selenium

Mon, 01 Jan 0001 00:00:00 +0000

Most web tests involve interacting with elements on a web page. This would not possible without first locating and retrieving these elements on the page. When the process of locating the elements of interest in the web page fails, Selenium throws a NoSuchElementException. This represents one of the most common Selenium exceptions, which is why it is so important to know about it and how to handle it correctly.

In this article, you will learn what a NoSuchElementException is, what the most common causes behind this exception are, and everything you need to know to handle it in your Selenium WebDriver regression tests.

Introduction to React Testing Library

Mon, 01 Jan 0001 00:00:00 +0000

Introduced in 2018 by the developer Kent C . Dodds, React Testing Library is a set of testing utilities that quickly made a splash in the React developer community. Contrary to React testing approaches up to that point, Kent pushed a different view of testing which can be summarized by this tweet:

The more your tests resemble the way your software is used, the more confidence they can give you.

This was a clear departure from the approach of existing front-end testing libraries which tended to test implementation rather than what the user was actually seeing.

Interacting with iframes in Selenium

Mon, 01 Jan 0001 00:00:00 +0000

Iframes, also known as inline frames, allow you to embed web pages within another web page. The <iframe> tag is extremely useful in web development because it can be used to load external web pages into the current page without the two pages interfering with each other.

This article will explain iframes and show you how to use Selenium, a popular open-source library used for regression testing, to automate operations that interact properly with iframes on your website.

Building tests with Cypress Studio

Mon, 01 Jan 0001 00:00:00 +0000

There have been lots of Cypress features over the years. They include Cypress Test Runner; this allows developers to see all test files and which browsers are available for running tests. Another is the Cypress code coverage feature, which lets you measure code coverage to know which parts of your code are tested.

In this article, we will look at one of Cypress’ experimental features, Cypress Studio. We will learn about it and how to create and modify tests with Cypress Studio. We will also look at some limitations of Cypress studio and why Cypress removed it in its version 10 release.

Writing end-to-end tests in Node.js using Selenium

Mon, 01 Jan 0001 00:00:00 +0000

The importance of software testing cannot be overstated in software engineering, and it is even more crucial in front-end development. Testing your application with functional and unit tests alone may not guarantee its correctness. In this case, end-to-end (E2E) testing can be very helpful, as it can replicate user behavior in your application to guarantee that it functions correctly. Usually, this process involves writing a script to simulate users navigating through an application, testing certain features and behavior along the way.

What is the Next.js equivalent for Angular?

Mon, 01 Jan 0001 00:00:00 +0000

Next.js is one of the most popular full-stack frameworks available, and it has rapidly become one of the most adopted technologies when it comes to web development.

In addition to adding SSR (Server-Side Rendering) capabilities to React, Next.js provides a complete toolset for building fast, efficient, high-performance websites with low load times.

In this article, we will provide an overview of Angular Universal, which is the closest equivalent to Next.js in the Angular ecosystem.

Why code-first tools are failing

Mon, 01 Jan 0001 00:00:00 +0000

Automated testing is now relatively mainstream. In the United Kingdom, where I am based, any decent-sized project can expect to have team members dedicated to writing coded automation tests. This new breed of developer’s duties is to test the correctness of the applications being built by writing code that uses an existing test framework. The resultant tests are then run in a continuous integration environment whenever the application code is modified. The goal is to alleviate the tedious repetitiveness of manual testing and cut our reliance on human beings to execute the tests.

What is headless browser testing?

Mon, 01 Jan 0001 00:00:00 +0000

Headless browsers have several use-cases including web scraping, automated testing, automating interactions with websites, or more nefarious uses like performing DDOS attacks.

The term isn’t self-explanatory though, and knowing exactly what a headless browser is can be a little confusing.

In this article, we’re going to discuss:

What is a headless browser?
How do headless browsers apply to testing?
What are the advantages of a headless browser?
What are the disadvantages of a headless browser?
Finally, we’ll implement a headless browser in Puppeteer.

What is a headless browser?

A headless browser reads, parses, and interacts with web pages without rendering a graphical user interface (GUI), and without requiring a user to operate the browser. For normal web browsing, having a GUI is essential for viewing content and interacting with the underlying web page. With a headless browser, you can replicate and automate almost anything a user can do, and do it in a host of programming languages.

Cross-browser testing using Selenium IDE

Mon, 01 Jan 0001 00:00:00 +0000

Getting Started

Selenium IDE is a record-and-playback tool with a simple interface that helps in building automated test scripts.

As you interact with a website in your browser, Selenium IDE records those same actions so they can be replayed later as part of an automated test. Selenium IDE is available as a browser extension for either Google Chrome or Mozilla Firefox, however, the next major release will be a standalone Electron application, although there is currently no published release date for this upcoming version.

Interacting with native alerts using Selenium WebDriver

Mon, 01 Jan 0001 00:00:00 +0000

Sometimes web pages notify you about the result of an operation or ask you for confirmation through dialog windows. These dialogs will appear on top of whatever is displayed on the current web page and prevent you from performing any other operation until the dialog is dismissed. These dialogs, which are often referred to as “alerts”, cannot be styled and utilize the browser’s default look-and-feel.

In this article, you will learn what a native alert is, what are the most important types of alerts you should be able to deal with, and everything you need to know to interact with them with Selenium WebDriver in Java. But first, let’s delve into Selenium WebDriver.

Async waits in React Testing Library

Mon, 01 Jan 0001 00:00:00 +0000

In this guide, we will cover how to handle asynchronous operations while testing our React components using React Testing Library. To follow this tutorial, a basic knowledge of React is required, as well as some familiarity with React Testing Library, which is sometimes referred to as RTL.

JavaScript: Asynchronous by default

For all but the simplest JavaScript applications, some form of asynchronous behavior is practically a given. Imagine a simple web application that fetches some data from an API and displays it on the UI. At a minimum, an asynchronous call will be used to fetch the API response. Other asynchronous behavior in this simple app could include things like:

Sending command-line arguments to an npm script

Mon, 01 Jan 0001 00:00:00 +0000

Node.js is full of utilities and CLI tools that let you customize them to do exactly what you want. If you need something really custom, though, “npm scripts” are the way to go. You might have used this for your “build” or “dev” scripts, but there’s a lot more you can do with them. npm scripts are the commands you can execute in a Node.js project using npm run.

When you’re developing an npm script, you’ll need some input to be able to tell the script what needs to be done with these values. This is where command-line arguments will come in handy! In this guide, you will learn how to create a simple npm script and pass input values to the script using command-line arguments.

How to use Node.js modules in Deno

Mon, 01 Jan 0001 00:00:00 +0000

What is Deno?

Deno is a V8-based runtime for Javascript and Typescript that was created by Ryan Dahl, the original creator of Node.js. Deno seeks to address perceived shortcomings in the design of Node.js, specifically around security, ease of use, and dependency management.

Some key differences between Node.js and Deno are:

Deno seeks to improve the security of applications by providing a more secure default configuration. By default, Deno has no access to the file system, network, or environment variables. Developers must explicitly choose to enable access.
There is no equivalent to a ‘package.json’ in Deno. Instead, dependencies are imported by referencing package URLs directly in your Typescript code. Deno provides tools for inspecting the dependency cache (deno info) and pre-loading the cache (deno cache). The latter command is particularly useful in CI pipelines where you want to avoid downloading dependencies over the public internet, either for speed reasons or to prevent network failures from causing builds and deployments to fail.
Working with TypeScript does not require any configuration in Deno, although you can provide one if you want to change any configuration parameters used by the TypeScript compiler (tsc).

How to use a Node module in Deno

Before we dive in, let’s take a quick look at the key differences that make it difficult for you to use Node.js modules in the Deno application.

Micro Frontends, are they the future of web development?

Mon, 01 Jan 0001 00:00:00 +0000

Why Micro Frontends

Traditional web applications are usually built as a single page application (SPA). There are many benefits to a SPA, including faster load times between page loads, but a key benefit is separation from the backend/data layer of the application. Having a clearer separation of concerns between frontend and backend logic makes it easier for product teams to make UI changes independent of the API and DB layers. In other words, you can have one team that is focused on delivering a strong API experience, while another team works on delivering the best end user experience.

Setting up Selenium Grid for cross-browser testing

Mon, 01 Jan 0001 00:00:00 +0000

Despite the dominance of Google Chrome’s market share, there’s still more than a third of web usage worldwide that occurs on non-Chrome browsers. Given the complexity of supporting thirty years of web standards, it’s not surprising that the same web application can present divergent behavior across browsers. This makes the task of testing across browsers especially important for developers who want to ensure a consistent, working experience for all users.

Testing across browsers presents its own challenges. For instance, Google Chrome can work on operating systems with little or no exception, while Safari only works on Apple systems like macOS, iPadOS and iOS.

Highlighting text in Cypress tests

Mon, 01 Jan 0001 00:00:00 +0000

Testing Basics

The Three “A”s

A straightforward approach to testing is what’s known as the three “A’s”: Arrange, Act, and Assert. These three concepts are the bedrock for structuring your regression tests.

Arrange: When writing a test, the first step is to set up, or arrange, the proper environment. Typically, this environment is a shared development or QA environment, but it could also be your local environment or even production.
Act: The next step, or “act”, involves an action that seeks to simulate how the user engages with the application. This is arguably the most important part of testing because we are putting the action that the user takes to the test.

How to take a screenshot inside Selenium WebDriver

Mon, 01 Jan 0001 00:00:00 +0000

Introduction

Selenium is a free and open-source framework for automating actions inside of a browser. Selenium scripts can be written in a variety of languages, including Java, C#, and Python.

Selenium’s built-in features can also be combined with other libraries to let you do things that Selenium doesn’t support by default. In this tutorial, you’ll learn how to take screenshots using Selenium and Python. We’ll cover how to use Selenium’s built-in functionality for taking full-page screenshots and saving them on your local computer. We’ll also use Selenium alongside another Python library, which will enable us to take screenshots of specific elements.

Waiting until elements are interactable in Selenium

Mon, 01 Jan 0001 00:00:00 +0000

Introduction

Nowadays, most web applications don’t serve all of the data needed to render the entire page within the initial HTTP response. Instead, most web applications load data asynchronously in fetch() or XHR calls that are separate from the initial page request. This allows web applications to load new data incrementally without having to reload the whole page, but it means that when testing web applications, it’s not sufficient to wait for the initial page load before running your automated tests, since your tests may be reliant on data and UI elements that don’t yet exist on the page.

The hidden dependencies in your regression tests

Mon, 01 Jan 0001 00:00:00 +0000

At Reflect, we think a lot about how to improve the state of end-to-end testing. We knew that improved tooling and faster execution were clear wins, but one thing that wasn’t obvious to us was how correlated an application’s state is to the complexity of testing that application.

The practice of managing the state of the application under test, known as test data management, is often overlooked. In this article, we’ll cover how teams typically manage (or don’t manage) this data, and present a new method we’ve developed to make this process easier.

In Regression Tests, Conditionals = Complexity

Mon, 01 Jan 0001 00:00:00 +0000

At Reflect, we care a lot about making regression tests maintainable. Our regression testing guide covers a lot of common situations that lead to flaky tests, but one anti-pattern we don’t hear discussed a lot is the presence of conditionals (i.e. if-else and switch statements) in tests. In this article, we’ll cover common scenarios where we’ve seen conditionals used in regression tests, along with better alternatives.

Handling Third-Party Integrations

Since regression tests are mainly run on shared systems like a Staging or QA environment, third-party integrations like live chat widgets, personalization tools, and A/B testing platforms may be integrated with those systems and have a habit of interfering with tests. Imagine that your web application uses an A/B testing framework, and your marketing team is using it to run a site-wide campaign that displays a pop-up modal to 50% of sessions. This could easily interfere with your tests, and it’d be tempting to write an if-statement to check for and dismiss the modal if it is displayed. This can be a quick fix, but it’s keeping open a class of issues that could make many of your other tests flaky down the road. Rather than using an if-statement, a better approach is to try to disable the marketing widgets entirely. Here’s some alternatives for doing just that:

A practical, step-by-step guide to using Chrome's DevTools

Mon, 01 Jan 0001 00:00:00 +0000

Introduction

In this post, we’ll aim to cover practical techniques developers can use to debug, manipulate, and otherwise probe running web applications via Chrome’s built-in devtools. The goal is to articulate the specific steps and shortcuts we would use at Reflect, and to favor breadth over depth. Readers can follow the guide step-by-step and try it out themselves at the provided link provided below. With that in mind, let’s imagine the following (contrived) scenario.

Using BiDirectional Protocol support in Selenium 4 to measure browser resource utilization

Mon, 01 Jan 0001 00:00:00 +0000

BiDi Protocol in Selenium 4 - not just network and console logs!

Previously, we showed how to record network requests and console logs in Selenium 4 via the currently-in-draft BiDirectional (or BiDi) protocol, but that was far from the only new capability that the new BiDi-related APIs provide! In this article we’ll show how to use Selenium 4 to inspect browser performance and resource-utilization metrics, using examples written in Scala.

Collecting Browser Performance and Resource Utilization data in Selenium 3

In previous versions of Selenium, there were no dedicated APIs for retrieving performance-related information from the browser - making it difficult to obtain performance data from the browser session while running your tests. You could open the DevTools while the browser was still open, but that approach breaks down if you want to automate metric collection and/or collect metrics periodically.

The Perfect Configuration Format? Try Typescript

Mon, 01 Jan 0001 00:00:00 +0000

Before getting into why Typescript is a compelling choice for config files, let’s review the common file formats used in a typical web application today:

XML: Back in the late 90s to mid 2000s this was king both as a messaging protocol and flat file format. It gets a bad rap, but there is a lot to like about XML as a config file format, including great tooling support and a robust schema definition language in XSD.
JSON: Extremely common as a data interchange format in REST APIs, and also very popular as a config file format. For a lot of developers this strikes the right balance of feature-set and simplicity.
YAML: This format is packed full of features that I’ve never needed to use. Due to its focus on terseness, I find its features to be less discoverable versus something more verbose like XML. For me, it’s the Perl of configuration formats.
TOML: Short for Tom’s Obvious, Minimal Language - this format doesn’t go overboard on features while still being more terse than JSON or XML. However, the hitchdev blog makes a compelling argument about difficulties with using TOML for large config files.

Here’s where I think Typescript shines:

Stable Ordering and Caching with Infinite Scroll

Mon, 01 Jan 0001 00:00:00 +0000

Introduction

Infinite scroll is a common interaction pattern on the web today. To save bandwidth and server resources, a webpage only loads a subset of items in a collection initially. As the user scrolls through the collection (e.g., a photo gallery), the webpage loads more items in the background and appends them to the visible collection that the user sees. For ordered collections that are static, each subsequent “page” of items can be cached in-memory since the page boundaries are known ahead of time.

Using BiDirectional Protocol support in Selenium 4 to stream console logs and network requests

Mon, 01 Jan 0001 00:00:00 +0000

BiDi Protocol support in Selenium 4

One of the new features in the recently released Selenium 4 is support for new event-driven listeners which will be powered by the currently-in-draft BiDirectional (or BiDi) protocol (though the current Selenium implementation has some limitations, which we’ll discuss later). In this article we’ll discuss some of these new capabilities and demonstrate how to use them in your own regression tests. to inspect console logs and network requests made from the browser.

Reflection at Reflect: The Reflect and Proxy APIs

Mon, 01 Jan 0001 00:00:00 +0000

Reflect & Proxy

Reflect and Proxy are both standard built-in objects introduced as part of the ES6 spec and are supported in all modern browsers. Broadly speaking, they formalize the concept of metaprogramming in the context of Javascript by combining existing introspection and intercession APIs, and expanding upon them. In this article we’ll explore how these objects work using examples that approximate real-world requirements.

Introduction

Javascript engines have object internal methods like [[GetOwnProperty]], [[HasProperty]], and [[Set]], some of which were already exposed for reflection in earlier versions of the spec. If you’ve worked with Javascript before, you’re probably familiar with some of these developer-accessible equivalents. For example…

Implementing a Task Queue in SQL

Mon, 01 Jan 0001 00:00:00 +0000

Introduction

Software systems often periodically execute collections of similar or identical tasks. Whether it’s computing daily account analytics, or running background computations asynchronously like GitHub Actions, it’s common to structure and complete this computation using a queue of tasks and the concept of a generic “worker” which executes the task. In the naive approach, a single worker sequentially executes each task, avoiding locks or other coordination.

Two downsides to the single worker approach are:

Getting Started with Automation Testing

Mon, 01 Jan 0001 00:00:00 +0000

Automation testing uses software to execute a predefined set of actions against your user interface that automatically verifies those actions against a set of predefined results. When done right, teams can increase test accuracy and achieve greater test coverage in shorter timelines by taking over mundane, repetitive, time-consuming tasks such as regression tests. Manual testing efforts can then be focused on exploratory tests, test results review, and other higher-value tasks.

An End To End Testing Strategy For Continuous Delivery

Mon, 01 Jan 0001 00:00:00 +0000

Agile and CI/CD

Continuous delivery is the software engineering practice of releasing, or deploying, software changes to the production system immediately after they are reviewed and deemed ready. A related concept is to perform the review of the changes quickly to increase both application development release frequency and the efficiency of confirming that the changes are correct post-deployment. The goal is to create a tight feedback loop between developers and the state of the production system. These short cycles of collaboration reduce bugs that are introduced due to context-switching or unfamiliarity, and establish a means for continuous testing. Additionally, it forces the system infrastructure itself to provably maintain its flexibility in response to new features, changing usage, errors and rollbacks.

Continuous Integration in Agile Development

Mon, 01 Jan 0001 00:00:00 +0000

Continuous integration basics

Continuous integration is the practice of building and testing a codebase for every proposed change, often executing the process multiple times per day across a software development team. Each developer integrates their changes into the official latest version of the codebase to identify integration issues early in the development process. Additionally, the execution of the full test suite provides broad regression protection even as developers work on isolated areas of the codebase.

Announcing our Seed Fundraise

Mon, 01 Jan 0001 00:00:00 +0000

With the ubiquity of web technologies, and with so much of our day-to-day work going digital, it’s more essential than ever to provide software teams with better tools to ship software faster and with higher quality. When we talk to CTOs, we hear time and again that the barrier to adopting end-to-end test automation is the time it takes to build and maintain a test suite. Large companies have the resources to dedicate developers full-time to test automation, but for a lot of other software organizations, it’s a non-starter.

How to Test React Apps

Mon, 01 Jan 0001 00:00:00 +0000

React app testing methods to improve the performance of your development team

To keep your React apps maintainable and working as expected, testing is key. In this article we’ll cover some key strategies for testing your React application.

What is React testing?

React applications center around the concept of components, and so it makes sense to think of testing React applications in terms of components as well. Tests for a React application can be classified into three categories: (1) verifying the internal state of a component, (2) verifying the external state of a component, or (3) verifying how multiple components interact with each other.

How YC Companies Test React Apps

Mon, 01 Jan 0001 00:00:00 +0000

The data from this article is based on a six-question survey of 46 technical founders of YCombinator-funded companies. The raw results are included below along with commentary and additional stats (courtesy of Openbase).

Unit Testing

Our first two survey questions were about unit testing, specifically what we categorized as unit testing frameworks and test runners. This ended up being an imperfect categorization, as some frameworks like Jest take an all-in-one approach, whereas libraries like Chai really are better described as an assertion library. So in hindsight it’s hard to lump them all together.

Put your Automation to the Test: Best Demo Websites for Testing

Mon, 01 Jan 0001 00:00:00 +0000

Overview

What scenarios scare you the most about your test automation? Drag-and-drop? File uploads? Well, face your fears and test them against these great sites for verifying your automation’s performance. The web is a massive, heterogeneous beast and growing larger every year. So, don’t be discouraged if there are new web experiences that you aren’t able to automate so easily. This guide covers a few “gotchas” about creating automated tests, and then dives into some of our favorite sites for testing Reflect.

Visual Validation: Does Your Site Pass the Eye Test?

Mon, 01 Jan 0001 00:00:00 +0000

Overview

Visual Validation of a website is simply verifying that everything looks correct. It can cover all aspects of the website’s appearance, including layout, coloring, image sizing and contextual menus. It’s easy to see why visual validation is popular: it gives a website maintainer peace of mind that their users have the correct (positive) experience while using their site. And it’s also easy to see why it’s important: all of the popular frameworks like Vue, React and Angular have shared dependencies on hundreds of JavaScript libraries. Even seemingly simple changes can have far-reaching impact throughout a site

How to Design a QA Process

Mon, 01 Jan 0001 00:00:00 +0000

How to create a leading Quality Assurance process

All software companies establish a QA process to ensure that their applications are always working. During the development cycle, as applications evolve and acquire new functionality, that functionality needs to be tested for quality and correctness. However, existing functionality also runs the risk of breaking as a result of changes—both internal and external. Thus, existing functionality needs to be tested as well to ensure that it hasn’t regressed. Your QA process lays out how your company ensures that it meets both of these requirements.

Mapping the Testing Pyramid to Automated Testing Tools

Mon, 01 Jan 0001 00:00:00 +0000

Overview

Automated testing tools are great. They save you time (and money) by automating tasks that you would otherwise perform yourself. Software testing is a mature concept within the broader landscape of software development, so you have tons of options when considering what aspect of testing your web application that you’d like to automate.

Reflect automates testing at the end-user level. That is, Reflect doesn’t test isolated parts of your application code; it tests the full, end-to-end user experience, just like someone using your application in real life. You can certainly create tests in Reflect that only exercise a specific, narrow portion of your web application. But if you want to automate testing below the surface of the end user experience, what are your options for QA tools? We highlight the important components to consider at each level of the testing hierarchy, and include an automation tools list for each.

Launching on Product Hunt

Mon, 01 Jan 0001 00:00:00 +0000

Moving to a Freemium Model

We’ve had our eye on moving to a freemium model, adding a new Free plan to our existing lineup of Starter, Standard, and Pro tiers. We felt Product Hunt would be the perfect launch platform for this update, given that this would be the first time that anyone could signup without a credit card and create tests using Reflect.

At its core, Reflect converts your manual test steps into an automated, repeatable test. This requires that we be able to detect and replicate a varied set of user actions as you perform them. And we must be capable of doing this for any website, regardless of JS framework. The actions we need to detect are things like:

Reflect

The Next Chapter: Why we are excited to join SmartBear

Joining SmartBear

Lightning's Chaos, Thunder's Speed: The Illusion of 'Using the Platform' with LWC

Lightning Web Components

Reflect AI: The Next Step in Automated End-to-End Web Tests

The Problem with Code-based Test Automation

Testing emails using Cypress

How Reflect uses WireGuard to test non-public web applications

Introduction

Accessing pseudo-elements in Playwright

Introduction to vue-test-utils

Introduction

Guide to testing Angular apps

Introduction

Setting up our Angular project

Introduction to Ladle

Introduction

Guide to creating your first Cypress test

Installing Cypress

Testing drag-and-drop workflows in Cypress

Introduction

How to deal with StaleElementReferenceException in Selenium

How to fix an InvalidSelectorException in Selenium

How to mock API requests in React tests with Mirage JS

Guide to Safari Developer Tools

UI Testing with Postman

What is Postman

How to test drag-and-drop interactions in Playwright

Testing pseudo-elements in Cypress

What’s a pseudo-element?

Using Postman to test SOAP web services

Testing mobile web apps in Cypress

Introduction

Using Playwright for API testing

API testing in Cypress

How to automatically generate social share images for your blog

Creating automated tests for Safari and WebKit

Introduction to Remix

What is Remix?

Testing two-factor authentication with Cypress

Introduction

Simulating hovers in Cypress

Introduction to the T3 stack and create-t3-app

Visual testing in Playwright

Testing Shadow DOM elements in Selenium

Introduction

Introduction to RedwoodJS

How to run Selenium tests inside a Docker container

Introduction to Bun

Testing HTTP Basic Authentication in Selenium

Introduction

How to test SMS workflows in Selenium

Introduction to Astro

How to save and load cookies in Selenium WebDriver

Introduction

How to save and restore state in Cypress tests

Best Practices on Sharing State

Fixing Cypress cross-origin errors

Introduction

What is Cypress?

React State Management with Recoil

React State Management

Testing email workflows with Selenium

How to test file uploads in Selenium

Introduction

Introduction to Chrome DevTools Protocol

Introduction

Comparing screenshots in Cypress

Accessing a new window in Cypress tests

Introduction

Introduction to Nuxt Test Utils

What is Nuxt Test Utils?

What is Selenium WebDriverManager?

Strategies for handling async code in Cypress

Deno's Networking and File Permissions Model

What is Deno?

What is Deno Deploy?

Installing ChromeDriver and Python Selenium

Introduction