Skip to content

Latest commit

 

History

History
188 lines (132 loc) · 5.46 KB

README.md

File metadata and controls

188 lines (132 loc) · 5.46 KB
Raw

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
  • 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