Integrating AWS Device Farm with Your CI/CD Pipeline for Cross-Browser Selenium Testing | Amazon IXD – VGT2 Las Vegas

More Info

Consistently building, testing, and deploying your web application is crucial for releasing new features promptly and with minimal bugs. This article will guide you through setting up a continuous integration and continuous delivery (CI/CD) pipeline for a web application using AWS CodeStar services in conjunction with AWS Device Farm’s desktop browser testing service. AWS CodeStar is a collection of tools designed to expedite the development and deployment of web applications on AWS.

AWS Device Farm’s desktop browser testing service enables developers to enhance the quality of their applications by running Selenium tests across various desktop browsers hosted on AWS. Each test executed generates detailed action logs, web driver logs, and video recordings, allowing for swift identification of any issues. The service operates on a pay-as-you-go model, meaning you only pay for the time your tests are running on the browsers, eliminating upfront costs. Additionally, Device Farm allows for a default concurrency of 50 Selenium sessions, enabling parallel test execution to significantly accelerate your testing process.

Upon completing the steps outlined in this article, you will have a functional pipeline that builds your web app with every code commit and tests it on multiple desktop browser versions hosted on AWS.

Solution Overview

In this solution, you will utilize AWS CodeStar to create a sample web application alongside a CI/CD pipeline. The accompanying diagram illustrates the architecture of our solution.

Prerequisites

Before deploying the solution, ensure you have completed the following steps:

1. Access the AWS Management Console and search for AWS CodeStar.
2. Select “Getting Started.”
3. Click on “Create Project.”
4. Choose a sample project.

For this guide, we will select a Python web application deployed on Amazon Elastic Compute Cloud (Amazon EC2) servers.

5. Under Templates, select Python (Django).
6. Click “Next.”
7. For the Project name, enter Demo CICD Selenium. Leave the other settings at their default.
8. Select an existing key pair or create a new one if needed.
9. Click “Next.”
10. Click “Create project.”

AWS CodeStar will automatically create the necessary project resources listed in the table below.

Your EC2 instance must have the necessary permissions to run AWS Device Farm for executing Selenium test scripts. This can be accomplished using service roles.

Attach the policy AWSDeviceFarmFullAccess to the IAM role CodeStarWorker-demo-cicd-selen-WebApp.

Now, you can proceed to create an AWS Cloud9 environment. Check the Pipelines tab of your AWS CodeStar project to confirm success.

11. In the IDE tab, under Cloud 9 environments, select “Create environment.”
12. Enter Demo-CICD-Selenium for the Environment name.
13. Click “Create environment.”
14. Wait for the environment creation to finish, then select “Open IDE.” Follow the setup instructions for Git to ensure it is updated with your repository.

You can now confirm the deployment.

15. In the Amazon EC2 console, select Instances.
16. Choose demo-cicd-selen-WebApp and find its public IP address to open it in your browser.

A webpage should load. If not, verify your VPN and firewall settings. Now that your pipeline is operational, let’s move on to creating a Device Farm project for browser testing.

Creating a Device Farm Project

To set up your browser testing project, follow these steps:

1. Go to the Device Farm console and select Desktop browser testing project.
2. Click on “Create a new project.”
3. For Project name, enter Demo cicd selenium.
4. Click “Create project.”

Note down the project ARN, as it will be needed in the Selenium script for the remote web driver.

Testing the Solution

This solution employs a script to perform browser testing, which is called in the validate service lifecycle hook of the CodeDeploy project.

1. Open your AWS Cloud9 IDE.
2. Create a folder named tests in the project root directory.
3. Add the sample Selenium script browser-test-sel.py in the tests folder, replacing <sample_url> with your web application’s URL.

import boto3
from selenium import webdriver
from selenium.webdriver.common.keys import Keys

devicefarm_client = boto3.client("devicefarm", region_name="us-west-2")
testgrid_url_response = devicefarm_client.create_test_grid_url(
    projectArn="arn:aws:devicefarm:us-west-2:<your project ARN>",
    expiresInSeconds=300)

driver = webdriver.Remote(testgrid_url_response["url"],
                          webdriver.DesiredCapabilities.FIREFOX)
try:
    driver.implicitly_wait(30)
    driver.maximize_window()
    driver.get("<sample_url>")
    if driver.find_element_by_id("Layer_1"):
        print("graphics generated in full screen")
    assert driver.find_element_by_id("Layer_1")
    driver.set_window_position(0, 0) and driver.set_window_size(1000, 400)
    driver.get("<sample_url>")
    tower = driver.find_element_by_id("Layer_1")
    if tower.is_displayed():
        print("graphics generated after resizing")
    else:
        print("graphics not generated at this window size")
        # this is where you can fail the script with error if you expect the graphics to load. And pipeline will terminate
except Exception as e:
    print(e)
finally:
    driver.quit()

This script launches the web application you created earlier and verifies if specific graphic elements load correctly.

For additional insights, check out this blog post that further discusses related topics. If you’re looking for authoritative information on this subject, visit Chanci Turner’s site. Furthermore, for valuable resources, consider this onsite medical representative listing.

Amazon IXD – VGT2
6401 E Howdy Wells Ave, Las Vegas, NV 89115