Git Product home page Git Product logo

applitools-cypress-workshop's Introduction

๐Ÿง Applitools Cypress Workshop

In this workshop you'll learn how to add comprehensive visual testing to your Cypress tests with Applitools Eyes

๐Ÿ” Workshop Overview

Excited to learn? You should be! Here's some of the stuff we'll learn in this workshop:

  • What is Applitools and visual testing?
  • How Applitools works with Cypress
  • Installing Applitools Eyes Cypress SDK
  • Adding a new Eyes check in Cypress
  • Crossbrowser testing with the Ultrafast Grid

๐Ÿ‘จโ€๐Ÿš€ Who Am I?

I'm Colby Fayock! ๐Ÿ‘‹

I help others get the tech out of the way to solve real problems with the tools of the web. I work with the dev community as a Developer Advocate at Applitools and am a prolific creator of educational content around the web teaching others through learning by doing one Star Wars plush cuddle at a time.

You might have seen some of my educational work across the web where I help others learn about Javascript, React, and the static web by creating tutorials on YouTube, writing about those tutorials on spacejelly.dev, and I'm a course instructor with egghead.io and Level Up Tutorials.

You can also find me on Twitter at @colbyfayock!

๐Ÿงฐ Before the Workshop

You'll want to make sure that you meet the miminum environment requirements in the section below. Basically, you should be able to use npm for working with projects locally on your machine.

We unfortunately won't have time to debug individual setups, so if you're trying to follow along, it's important you can already perform the minimum tasks on your environment.

You also can optionally sign up for a free Applitools account ahead of time, but we'll be walking through that during our session.

Environment Requirements

There's one thing that is probably considered a "strict" requirements for the workshop:

The packages will be included in the repository when using npm to install and add the Applitools Eyes SDK.

This means that you should have basic familiar with a terminal as we'll be using it to run commands!

The operating system you use shouldn't matter as long as you can run commands with npm.

If you can run npm -v you should be good to go.

Setting Up the Project

For our project, we're going to be starting with an existing Cypress test that's included in this repository.

I recommend having the project downloaded and running on your local environment before we start the workshop to ensure there are no issues.

You can either download the repository as a ZIP file or you can use Git to clone it:

  • Download as a Zip
  • git clone https://github.com/colbyfayock/applitools-cypress-workshop

Once you have the project downloaded or cloned, you can navigate to the demo directory where you'll find instructions inside of the README.md file for how to get started.

๐Ÿ–ฅ The Workshop

Lessons Structure

There are two primary directories in this repository: demo and lessons.

The demo is what it sounds like, it's the project that we'll use to start off and later add our visual tests.

The lessons directory includes a bunch of markdown files which includes instructions for how we'll progress through the workshop. There will be a mix of exercises that we'll work through together!

Lesson Plan

๐ŸŽ“ After the Workshop

Feedback

The good, the bad -- I want to know! I would really appreciate you taking any time to hop in this survey and be honest about your experience with the workshop. Please take into consideration both how much you've enjoyed the workshop and how much you felt you've learned.

Take the survey! (https://forms.gle/99xgyKQwMedTJpy37)

applitools-cypress-workshop's People

Contributors

colbyfayock avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.