CSE 270: Software Testing

W06 Assignment: Automated User Interface Testing

Overview

This exercise will be using the Selenium IDE browser plug in to create automated user interface tests.

Recall the manual testing we did in previous weeks on the Teton Idaho Chamber of Commerce web site. Using a tool like Selenium IDE, we can record ourselves visiting the web site and testing the site automatically.

A smoke test is used to verify the key features of a program are still up and running. This can be very useful for detecting breaking changes in a software deployment, or to detect when a subsystem is down and preventing proper functioning of the program. A smoke test is meant to be a quick check of systems that doesn't go very deep. We can create a smoke test for our site by verifying key features.

Instructions

Install Selenium IDE

First, install the Selenium IDE extension from the Chrome Web Store onto your Google Chrome browser. The Selenium IDE plug-in is also available on other browsers such as Firefox. For the sake of brevity, this demo will only show instructions on Chrome. The functionality will be similar on both browsers.

  1. Open the Chrome web browser
  2. From the menu select Extensions → Visit Chrome Web Store
    Add extension via Chrome Web Store
  3. From the Chrome Web Store enter Selenium in the search box to find the Selenium IDE it will look like this:
    Selenium IDE Extension
  4. Click the Add to Chrome button to add the extension to chrome.

Setup the Test Site

For these tests, you will use the v1.6 version of the site running locally on your computer. This is so we can create tests that will also run in our CI/CD pipeline. You should download and install the v1.6 version from this file cse270-v16.zip as you have done before.

Selenium Quickstart Tutorial.

To get you started, I will show you how to create a test case using Selenium IDE. We'll work on the first item in the list below.

Now it's your turn. Start by creating a new project called "Smoke Test". Save the file as smoke.side.

In the smoke project, create a suite of tests that do the following. Each item in the list should be in its own test:

  1. Navigate to the home page
    1. Verify that the site logo is displayed
    2. Verify that the website heading "Teton Idaho Chamber of Commerce" is displayed
    3. Verify that the title displayed in the browser tab is "Teton Idaho CoC"
  2. Navigate to the home page
    1. Make sure the screen size is big enough to show the full navigation menu
    2. Verify that two spotlights are present.
    3. Verify the Join Us link is present 
    4. Verify clicking the Join Us link takes you to the join page.
  3. Navigate to the directory page
    1. Click on the "Grid" button to display the card view
    2. Make sure that the "Teton Turf and Tree" business is shown in the cards
    3. Click on the "List" button to display the list view
    4. Again, make sure that the "Teton Turf and Tree" business is displayed in the list
  4. Navigate to the join page
    1. Make sure the "First Name" input box is present
    2. Fill in the first page with information of your choosing
    3. Click the "Next Step" button
    4. Make sure the "Email" input box is present
  5. Navigate to the admin page
    1. Make sure the "Username" input box is present
    2. Fill in an incorrect username and password
    3. Click the Login button
    4. Ensure the appropriate error message is displayed.

Be sure to save your project file and name it smoke.side.

Prepare for automation

This activity will require the selenium and pytest (should already be installed) python libraries. Install them now.

Create a Selenium Test Automation

  1. Watch the video below for instructions on how to create automated Selenium tests.
  2. Using the instructions shown, export the smoke test you created earlier in this assignment
  3. Update the test as instructed to run in headless mode by replacing the current setup_method function with this new one below. 
    def setup_method(self, method):
  options = Options()
  options.add_argument("--headless=new")
  self.driver = webdriver.Chrome(options=options)
  self.vars = {}
  4. Add the following import to the imports section 
    from selenium.webdriver.chrome.options import Options
  5. After updating the file, do a test run on your local machine
    • Start your local Live Server and observe which port it runs on.
    • Open a terminal window
    • type "cd tests" and press Return or Enter
    • type "pytest" and press Return or Enter
  6. If you need to make any adjustments to your smoke test in order for it to pass, make the needed changes in Selenium IDE then export the test suite again.

  7. Note: The CI/CD pipeline will start a local web server in the pipeline to run these tests. The pipeline is expecting the tests to run on port 5500 (which typically matches the Live Server port). If your tests are not using port 5500, you will need to update your .github/workflows/main.yml file. Look for this section of code in the file and update the port number. 

      - name: Startup HTTP Server for pipeline tests
    uses: Eun/http-server-action@v1.0.11
    with:
      directory: .
      port: 5500
  8. Once the local build is successful, check your changes into the repository. This will kick off a new build that includes your smoke test.
  9. After you check the file in to the repository, go to the Actions tab to make sure the build is successful.
  10. Your pipeline now includes a smoke test!

Submission

Useful Links: