User experience is becoming more and more critical to the success of applications every year, making the world of front-end testing a fast-moving and exciting place. Along with our partners at Netlify, we were excited to host our second annual Front-End Test Fest last month. The event featured expert speakers from global brands, lively Q&A sessions as well as games and fun. It was hosted by Angie Jones, Head of Developer Relations at Block, and Cassidy Williams, Head of Developer Experience and Education at Remote.

We’ve rounded up all the videos in one place, so feel free to dive right in, or keep reading for a recap of the event.

Front-End Test Fest 2022

The event began with opening remarks from hosts Angie and Cassidy, before Andrew Knight (AKA the Automation Panda) took the stage to present the opening keynote.

OPENING KEYNOTE: The State of the Union for Front End Testing – Andrew Knight

Web development moves fast, and new techniques are constantly emerging with promises of better performance and simpler maintenance. The JAM stack, server-side rendering frameworks, and APIs for all the things are on the rise. How can we most effectively test our web apps when they follow these new patterns? In this talk, Andrew Knight, Developer Advocate at Applitools and Automation Panda, explores seven major trends in front end testing to help unlock the best approaches, tools and frameworks you can use. Andrew considers the value of new techniques like component testing and visual testing, and touches on the future with a glance at autonomous testing. Check out this exciting “state of the union” on current trends in front end testing!

How to Avoid Common Mistakes When Writing Your Cypress Tests – Filip Hiric

Filip Hric, QA Lead at Slido and Cypress expert, knows the pain of a failed, flaky test. Cypress is a great tool, but it’s only as effective as the tests you design with it. In this talk, Filip shows you a few powerful tools that are built into Cypress that can help you navigate the rough terrain of flaky tests so you can start designing tests that are evergreen and stable. He discusses common mistakes, the proper use of commands and plenty more. Check out his great presentation.

Coffee Break!

One of the nice things about the conference was the “coffee breaks” between the sessions, that gave attendees a chance to “mingle” with some of the speakers. Gleb Bahmutov (Senior Director of Engineering, Mercari US), Tiffany Le-Nguyen, (Sr. Frontend Engineer, Netlify) and Nick Taylor (Staff Software Engineer, Netlify) were available at the morning break.

Shifting Accessibility Testing to the Left – Marie Drake

Why are there still so many websites that are not accessible? Many companies still view accessibility testing as an afterthought or something that will be difficult to implement. In this talk, Marie Drake, Quality Engineering Manager at Zoopla, busts some of these myths around accessibility testing and explains how you can shift it to the left. She also covers the many benefits of improving accessibility, and how to integrate accessibility testing into development and testing workflows. Watch the talk right here.

Expert Panel: Trending Tools and Frameworks – What’s Hype and What’s Not

Cutting through the marketing noise to understand what’s hype and what’s real can be a challenge. In this panel, you’ll hear from leaders Skyler Brungardt, Sr. Manager of Digital Experience & Commerce at Gap, Dan Giordano, Sr. Director of Product Marketing at Applitools, and Tiffany Le-Nguyen, Sr. Frontend Engineer, and Nick Taylor, Staff Software Engineer, both from Netlify.

Take a look at this panel for an exciting conversation based on hands-on experience with the latest tools and frameworks being used at leading companies. The panel was expertly moderated by Joe Colantonio, the founder of TestGuild.

Lunch Break: Making Music with (Live) Code – Dan Gorelick

This was a fun one. For the lunch break, independent developer and artist Dan Gorelick gave a live musical performance using only code. Using the coding framework TidalCycles, Dan briefly introduces us to the technology and how it works before improvising a great live show. Check this one out for a bit of musical theory, conversation around how to combine code with musical ideas, and just for some fun music.

Slice and Dice Your End-to-End Tests – Gleb Bahmutov

In this presentation, Gleb Bahmutov, Senior Director of Engineering at Mercari US, shares some practical tips and tricks for reliable end-to-end testing at serious scale. Using parallelization and a bit of custom tinkering, his CI system has his team running 500+ end-to-end front-end tests – and running them quickly. Want to get developers and other stakeholders quick, high-quality feedback from your E2E tests? Watch this talk.

Increasing Automated Test Flow in a Monorepo – David Lindley, Ben Hudson

David Lindley and Ben Hudson, Software Engineering Manager and Senior Software Engineer at Vodafone UK, respectively, talk about the challenges and benefits involved in one of their global projects – a shared React component library situation in a monorepo. The library has 220+ shared components and developers across the globe contribute to it, so ensuring quality is critical! David and Ben share how they overcame issues that came up as they progressed, including how they used dependency checking to make sure they test only what is needed, speeding up test flow. See it here.

Coffee Break!

Another opportunity to schmooze with the speakers! Andrew Knight (Developer Advocate and Automation Panda, Applitools), Adam Murray (Developer Experience Team Lead, Cypress.io) and Ben Hudson (Sr. Software Engineer, Vodafone UK) were hanging out to chat in this afternoon break.

Getting Started with Component Testing in Cypress – Adam Murray

In the latest Cypress 10 release, the Cypress team has added something new – official component testing (previously, it was an experimental feature). In this hands-on talk, Adam Murray, Developer Experience Team Lead at Cypress, helps you get going with it. He starts at the very beginning, showing you how to install Cypress 10, configure it in a new application, and add your first component tests. Adam goes on to cover more advanced topics like cy.intercept() as well. Take a look.

CLOSING KEYNOTE: Looking Forward – Trends That Will Shape Modern Web Development – Jason Lengstorf

The web ecosystem is changing quickly, and it can feel hard to keep up with all the changes. In this fascinating closing keynote, Jason Lengstorf, VP of Developer Experience at Netlify, delivers some comfort – things are perhaps not as “new and different” as they seem. Jason looks forwards and back at the landscape of the web, discussing not only where we’re going but how it all builds on historical trends. Check it out here.

After the closing keynote, Angie and Cassidy delivered the closing remarks as the event concluded.

Thank You!

We want to extend a huge thanks to everyone involved in making this event such a huge success. The list could go on, but we’ll start with Angie and Cassidy for being rock star hosts, our brilliant speakers for sharing their wisdom and experience, and of course to every attendee for adding your voices and presence. Thank you – we could never have delivered an event this great without all of you.

If you liked these videos, you might also like our videos from our previous virtual events too – all free to watch. Happy testing!

The post Front-End Test Fest 2022 Recap appeared first on Automated Visual Testing | Applitools.

Running tests shouldn’t be an afterthought, but it can seem challenging to dive in with the huge variety of frameworks and simply not knowing what to test. Instead, we can use Netlify Build Plugins to instantly add automated visual testing to every deployment in just a few clicks with the Applitools Visual Diff Plugin.

What is a Netlify Build Plugin?

Netlify is a hosting and deployment platform that automates taking a web app and publishing it to the web. This also includes the ability to deploy serverless functions, allowing developers to closely develop APIs and backend logic right next to their apps.

As part of that process, Netlify gives developers the ability to install Build Plugins, which helps extend the default deployment allowing additional tools and services to tap.

This makes for a perfect opportunity for things like code analysis or custom build caching for those who don’t want to maintain it themselves, but it’s also an opportunity for adding testing, where we can start using Applitools to run visual tests without having to have any other type of infrastructure or frameworks configured.

How does Applitools work with Netlify Build Plugins?

With Build Plugins, Netlify provides a few different hook locations, meaning, throughout the build and deploy process, there are different steps at which point a Build Plugin can run code.

One of those steps is called Post Build, where as soon as Netlify finishes building the application, we can determine all of the pages that were built and run a visual test with Applitools Eyes.

This provides instant, broad coverage for web apps, making sure that each time we deploy the site, we’re not creating any new regressions or visual bugs.

How to get started with the Applitools Build Plugin?

If you’re already up and running with Netlify, the only thing you need to get started is a free Applitools account. Otherwise, this plugin only works for Netlify-deployed applications.

With your account, you’ll want to be able to locate your Applitools API key. You can find your API key inside of your Applitools dashboard under the account dropdown and by selecting My API Key.

Once you’re ready to go, there are two ways to install the Visual Diff plugin: using the Netlify dashboard or using the Netlify configuration file in your project.

Note: to use advanced settings such as custom browser configurations and ignore regions, you’ll need to use Option 2, using the Netlify configuration file in your project.

Option 1: Adding the Applitools Visual Diff Plugin with the Netlify UI

Setting up your API key

To start, locate to your site inside of Netlify and navigate to the Site Settings section.

Once inside, select Build & deploy in the sidebar and scroll down to Environment.

Here, we want to click Edit variables, where we’re going to add a new variable.

For the name, add APPLITOOLS_API_KEY.

For the value, add your unique Applitools API key.

Adding the Applitools Visual Diff Build Plugin

Next, navigate to the Plugins section of the Netlify dashboard, where it will then give you an option to go to the Netlify plugins directory.

Here, you can either search for “Applitools” or scroll down to the bottom where the name of the plugin will be “Visual diff (Applitools)”.

Click the Install button, where it will then ask you to select which site you want to add it to. Find and select your site then confirm installation.

Running a visual test through Netlify

Applitools has the ability to run visual tests by hooking into the Netlify build and deploy process, which means, we need to trigger a new deploy.

Inside of the Netlify dashboard and navigate to the Deploys section.

On the right, above the list of recent deployments, where you’ll see a button that says Trigger deploy. Click Trigger deploy, then select Deploy site from the dropdown.

This will now kick off a new deployment with Netlify. You can even view the logs if you select the new deployment.

Viewing Applitools Visual Testing results

Once the Netlify deployment as finished, Applitools will have run through your site visually testing each page.

You can now head over to the Applitools dashboard, where you’ll now see a new test with your project’s name!

Every time you run your test after, Applitools will compare the active state of your project to this baseline and make sure everything is working as expected!

Option 2: Using a netlify.toml to add the Applitools Visual Diff Plugin to a project

Setting up your API key

Even though we’re going to be setting up the plugin with our Netlify configuration file, we’ll still need to add our API key via the UI.

To start, locate to your site inside of Netlify and navigate to the Site Settings section.

Once inside, select Build & deploy in the sidebar and scroll down to Environment.

Here, we want to click Edit variables, where we’re going to add a new variable.

For the name, add APPLITOOLS_API_KEY.

For the value, add your unique Applitools API key.

Adding the Applitools Visual Diff Build Plugin

If you don’t already have one, create a netlify.toml file inside of the root of your Netlify project.

Next, add the following:

[[plugins]]
  package = "netlify-plugin-visual-diff"

This will tell Netlify that you want to use the Visual Diff plugin when deploying your site.

Running a visual test through Netlify

With your new configuration, commit the new file changes and push them out to your Git repository that’s connected to Netlify.

Unless disabled, this will automatically kick off a new Netlify deploy for your site which will run the visual tests during the build process!

Note: if you have automatic deployments disabled, try going to the Deploys section and triggering a new build.

Viewing Applitools Visual Testing results

Once the Netlify deployment as finished, Applitools will have run through your site visually testing each page.

You can now head over to the Applitools dashboard, where you’ll now see a new test with your project’s name!

Every time you run your test after, Applitools will compare the active state of your project to this baseline and make sure everything is working as expected!

Optional: Advanced Configuration

If using the netlify.toml to manage the plugin, you additionally have the option of passing in configurations via Netlify build plugin inputs.

Head over to the [Applitools Visual Diff plugin GitHub](Viewing Applitools Visual Testing results Once the Netlify deployment as finished, Applitools will have run through your site visually testing each page. You can now head over to the Applitools dashboard, where you’ll now see a new test with your project’s name! Every time you run your test after, Applitools will compare the active state of your project to this baseline and make sure everything is working as expected! ) to learn more!

Learn more about Applitools

Getting started with Netlify and the Applitools Build Plugin is just one of the many ways you can provide broad visual testing coverage on your project.

Check out the Applitools tutorials to find your favorite framework or get in touch to schedule a demo with one of our engineers!

The post Automatically Run Visual Tests on Every Netlify Deploy appeared first on Automated Visual Testing | Applitools.