Skip to content

This is an Automation Best Practices workshop designed to teach testing through cross-functional automation

License

Notifications You must be signed in to change notification settings

saucelabs-training/automation-best-practices

Repository files navigation

automation best practices workshop

In this automation best practices workshop you will learn the latest and greatest tools and techniques to drastically improve your testing!

We will focus on a holistic approach of testing front-end and back-end, web and APIs, functional testing, component testing, and many other things in between 😁

🧠You will learn

✅What is an automated atomic test

✅How to code automated atomic tests

✅How to login without a UI using a HTML web forms

✅How to login without a UI using JWT

✅How to write a component test

✅How to add a test id to our web app

✅How to correctly test a link and a tab

✅How to replace e2e tests with component tests

✅visual e2e tests

✅visual cross-browser tests

✅CICD with Github Actions

🔧Technologies you will use

  1. ReactJS
  2. Cypress
  3. WebdriverIO
  4. React testing library
  5. Jest
  6. Screener visual E2E testing
  7. Sauce Labs
  8. Github Actions

Table Of Contents

⚙️ Setup

1. Install Node 14 LTS

  • Use NVM for this installation by following instructions
    • Pre-requisites that make the process work
      • Make sure that a ~/.bash_profile exists. Check with open -e ~/.bash_profile. If nothing opens then create with touch ~/.bash_profile
      • With VS Code, make sure that your terminal corresponds to the installation location of NVM. For example, if NVM was installed to ~/.bash_profile then make sure that you are using the bash terminal and not zsh or another one
    • It should be just a single command to run in our terminal
    • !Don't forget to restart your terminal!
  • After installation, confirm install was correct by running nvm and seeing an output
  • Intall Node 14 with nvm install 14

Here's what the output would look like:

Downloading and installing node v14.16.1...
Downloading https://nodejs.org/dist/v14.16.1/node-v14.16.1-darwin-x64.tar.xz...
######################################################################### 100.0%
Computing checksum with shasum -a 256
Checksums matched!
Now using node v14.16.1 (npm v6.14.12)
Creating default alias: default -> 14 (-> v14.16.1)
  • Confirm node installation with node --version and seeing v14.16.1 or similar
  • Confirm NVM is set to 14 for default by running the following commands:
nvm list #will show all versions
nvm use 14 #to use 14
nvm alias default 14.16.x #to set it to the default

2.Clone and fork the repo

  1. Sign up for a free Github account
  2. Fork this respository
  • Make sure you are logged into Github
  • click the Fork in the upper right of the Github.
  1. Clone your fork of the repository to your machine. Must have Git installed
git clone URL_OF_YOUR_FORK
  1. Navigate to the directory of where you cloned your repo

cd YOUR_FORK_DIR/automation-best-practices

3.Install the app

cd my-react-app
npm install
npm run start

Expected Output:

Your output should look similar to this

Compiled successfully!

You can now view my-react-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://172.20.10.2:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

Don't worry about fixing any warnings that may appear during npm install

Once the app is running, kill the server by executing Ctrl + C in command line. We don't need the app running right now.

4.Have an IDE installed that can handle NodeJS (We will use VSCode)

✅👏Congratulations, you're 90% ready!

5.Fork, clone, install the cypress-examples repo

We will have a 2nd repo from which we work from only for login testing.

  1. Fork https://github.com/nadvolod/cypress-example-recipes
  2. Clone this repo to another directory (we will open it as a separate project later in the workshop)
  3. Install everything
cd cypress-example-recipes
npm i

5.Sign up for a free Sauce account

6.Set Your Sauce Labs Credentials

  1. Copy your Sauce Labs username and accessKey in the User Settings section of the Sauce Labs Dashboard.

  2. Open a Terminal window (command prompt for Windows) and set your Sauce Labs Environment variables:

    Mac OSX:
    $ export SAUCE_USERNAME="username"
    $ export SAUCE_ACCESS_KEY="accessKey"
    
    Windows:
    > set SAUCE_USERNAME="username"
    > set SAUCE_ACCESS_KEY="accessKey"
    

    To set an environment variables permanently in Windows, you must append it to the PATH variable.

    Go to Control Panel > System > Windows version > Advanced System Settings > Environment Variables > System Variables > Edit > New

    Then set the "Name" and "Value" for each variable

  3. Test the environment variables

    Mac OSX:
    $ echo $SAUCE_USERNAME
    $ echo $SAUCE_ACCESS_KEY
    

    WARNING FOR UNIX USERS!: If you have problems setting your environment variables, run the following commands in your terminal:

    $ launchctl setenv SAUCE_USERNAME $SAUCE_USERNAME
    $ launchctl setenv SAUCE_ACCESS_KEY $SAUCE_ACCESS_KEY
    
    Windows:
    > echo %SAUCE_USERNAME%
    > echo %SAUCE_ACCESS_KEY%
    

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

About

This is an Automation Best Practices workshop designed to teach testing through cross-functional automation

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published