comprehensive testing with javascript workshop

#testing4good

In this workshop you will learn the latest and greatest tools and techniques to improve your ability to test modern web applications.

You will focus on a holistic approach of testing front-end, APIs, and back-end.

You will analyze risks and prevent those risks with functional testing, api testing, visual testing and a lot more 💪

🧠 You will learn

✅API testing w/ Cypress

✅how to test a React web app using different types of tests

✅E2E ui tests w/ Cypress

✅visual cross-browser + cross-platform tests

✅CICD with Github Actions

🔧Technologies you will use

ReactJS
Cypress
WebdriverIO
Screener.io
Sauce Labs
Github Actions

Testing for Good

#testing4good

Net proceeds from this workshop are donated to Ecosia's Trees that Empower Women! Let's learn together and make the world better together!

Key

💡 this is a tip

🏋️‍♀️ this is an exercise for you to do

❓ this is a question for us to think and talk about. Try not to scroll beyond this question before we discuss

Your Instructor: Nikolay Advolodkin

🏢 I’m a Sr Solutions Architect at Sauce Labs
🔭 I’m the founder of Ultimate QA
🌱 I’m currently working on Sauce Bindings
💬 Ask me about environmentalism, veganism, test automation, and fitness
😄 Pronouns: he/him
⚡ Fun fact: I'm a vegan that's super pasionate about saving the planet, saving animals, and helping underpriveleged communities
📫 Follow me for testing and dev training

TA 1: Chris Eccleston

TA 2: Aleks Shineleva

⚙️ Setup

The safest way to ensure that we all have the same environment is for us to use Gitpod for our workshop. However, if you are comfortable doing so, you are free to setup the environment on your machine as well.

Sign up for accounts

Free Sauce account

Get your username and api key

Save your Sauce Labs Username and Access Key by going to the Sauce Labs user settings page

ℹ️ If you have a Screener.io account then do the step below. Otherwise, just copy one of the demo API Keys.

Save your Screener API Key by going to the API key page in your Screener settings
- Need to sign up for demo account before

🚨 If you don't get an API key before the workshop, please use one of the keys below 🚨

SCREENER_API_KEY:

34c95634-56fc-446e-b68e-20530262e3f4

fe5a0636-fde5-4209-a597-403a76f1b505

6b3cc9f4-4578-413c-b5cc-ed7d1b417981

8368adee-4463-4aa4-a441-6e6c58d67665

Gitpod setup

ℹ️ Gitpod lets you run an entire Dev environment from a browser! You can use this approach if you don't know how to setup a local environment.

Fork the repo

Sign up for a free Github account
Fork this respository

Make sure you are logged into Github
click the Fork in the upper right of the Github.
Give the repo a ⭐ or you can't participate in the workshop😝

In the browser address bar, prepend the current GitHub url with https://gitpod.io/#
- The resulting url should look as follows:
  
  https://gitpod.io/#https://github.com/YOUR-USERNAME/comprehensive-testing-js
Once the Gitpod.io URL is loaded, you will need to sign in with the GitHub account you created earlier

✅ A new tab open with a simple ReactJS application should open

ℹ️ Keep the app running, we will need it to run some sanity tests

Set your env variables

In a new terminal, run the following commands in that Terminal to set your SAUCE_USERNAME, SAUCE_ACCESS_KEY, and SCREENER_API_KEY:

eval $(gp env -e SAUCE_USERNAME=<sauce_username>)

eval $(gp env -e SAUCE_ACCESS_KEY=<sauce_access_key>)

eval $(gp env -e SCREENER_API_KEY=<screener_api_key>)

Replace <sauce_username>, <sauce_access_key>, and <screener_api_key> with your credentials

Once you have run those 3 commands, you can run the following commands to test your environment variables:

echo $SAUCE_USERNAME
echo $SAUCE_ACCESS_KEY
echo $SCREENER_API_KEY

✅ Your values should come back as expected

Run tests

Run sanity tests

If your tests run in US Datacenter

npm run test:sanity:us

If your tests run in EU Datacenter

npm run test:sanity:eu

✅👏Environment setup is complete if tests passed

Local setup

1. Install Node LTS

Use NVM for this installation by following instructions
- It should be just a single command to run in our terminal
  - !Don't forget to restart your terminal!
- After installation, confirm install with nvm --version
Intall Node 16 with nvm install --lts

Confirm node installation with node --version and seeing v16.x or similar
Confirm NVM is set to 16 for default by running the following commands:

nvm list #will show all versions
nvm use 16 #to use 16
nvm alias default 16.14.x #to set it to the default

2.Clone and fork the repo

Sign up for a free Github account
Fork this respository

Make sure you are logged into Github
click the Fork in the upper right of the Github.

Clone your fork of the repository to your machine. Must have Git installed

git clone URL_OF_YOUR_FORK

Navigate to the directory of where you cloned your repo

cd YOUR_FORK_DIR/comprehensive-testing-js

3. Install dependencies and start the application

While inside your 'comprehensive-testing-js' directory, run the following command to install all dependencies

npm install

After the dependency installation has completed, start the application by running the following:

npm run start

4.Follow the rest of the setup instructions

Follow the same steps for running tests.

ℹ️ The main difference is that you will set environmenta variables by following these instructions depending on your OS.

ℹ️ Some individuals aren't allowed to set their environment variables on their machines (Employer policy). In that case, you can hardcode them by modifying

You will need to hardcode these values as we do exercises.

5.Have an IDE installed that can handle NodeJS/JS (We will use VSCode)

✅👏Congratulations, your local environment is ready!

Prizes

Prizes will be given away for participation (tshirts, stickers...)

At the end, one lucky winner will get a backpack!

Rules of engagement

I'm here to serve you, your education, and your experience
Be kind, respectful, no judgment
Have fun

discombobulateme / comprehensive-testing-js