What is this codebase?

This is the Sauce Labs Sample Application which is designed to be used from desktop web browsers

• Setup
  • Requirements
  • Build
  • Storybook
• Test
• Deploy

Setup

Requirements

To set up the development environment directly on your host computer:

1. You’ll need Node.js installed (at least v12.x.x or higher). If you don't have Node installed, we recommend installing NVM to assist managing multiple active Node.js versions.

2. Install OpenJDK 8 for running the end-to-end tests

3. Install Google Chrome for running the end-to-end tests

4. Clone the project somewhere on your computer

    git clone [email protected]:<your-username>/sample-app-web.git
   

5. Install all dependencies by running this command from the root of the project

    npm install
   

Build

1. Build the application with

    npm run start
   

   This will build the application, start Chrome and load the website on http://localhost:3000/

2. Click around - this is the app!

Storybook

This website uses components which can be tested with Storybook. To run Storybook execute the following command:

npm run storybook 

This will open Storybook on http://localhost:6006/. More information about Storybook can be found here.

Test

E2E

Testing locally

To run the application test suite (which uses Webdriver.io, Selenium, and Chrome) make sure the application is running on http://localhost:3000/ (see above steps)

npm run test.e2e.local

This will run the application test suite

Testing on Sauce Labs

Running on Sauce Labs uses Environment Variables to authenticate credentials. You can find a guide on how to do this here.

1. npm run test.e2e.sauce.us to run tests on the Sauce Labs in the US Data Center
2. npm run test.e2e.sauce.eu to run tests in the EU Data Center

Make sure you've added the SCREENER_API_KEY variable to your environment variables.

Visual Component Testing

You can test the components with Screener Component testing by running the following commands

# This will test all components on Chrome only
npm run test.storybook.ci

# This will test all components on Chrome and Safari in mobile viewports
npm run test.storybook.mobile

# This will test all componentes on Chrome, Safari, Firefox and Safari
# with different desktop resolutions
npm run test.storybook.desktop

Each PR to master will also test the components with the test.storybook.ci-command.

Make sure you've added the SAUCE_USERNAME and SAUCE_ACCESS_KEY variables to your environment variables.

Deploy

Merges to master will automatically deploy to:

• https://www.saucedemo.com
• https://saucelabs.github.io/sample-app-web/

See: .github/workflows/github-pages.yml GitHub Action