Integrate Selenium IDE with BrowserStack

Run your tests using Selenium IDE (record and replay) on BrowserStack

Introduction

Selenium IDE is one of the most popular record and playback tools for automating your tests. You can run them later with your favorite choice of language. BrowserStack provides a way to automate those tests on different devices and combinations.

This guide will help you:

• Download and install Selenium IDE and Selenium IDE command line runner
• Recording and saving the Selenium IDE tests
• Run tests on BrowserStack Automate

Getting started with Selenium IDE

Follow the below steps to download and install Selenium IDE and Selenium IDE command line runner:

1. Download Selenium IDE for your preferred browser as shown in the following figure:
   
   

   

2. Install the Selenium IDE command line runner by executing the following command:

   npm install -g selenium-side-runner
   

   For more details, refer documentation for SeleniumHQ’s command line runner

Recording and saving the tests

Follow the below steps to record and save test using the Selenium IDE:

1. Click on the Selenium IDE icon appearing next to the address bar.
2. Click on Create a new project, assign a name to the project.

3. Click on the REC button, provide the URL of the application under test. For example, http://google.com, click on StartRecording. Record the Selenium test with the help of Selenium IDE as shown in the following figure:
   
   

4. Perform all the actions to be tested on the application. After completing all actions, click on Stop recording.
5. Save the test as BrowserStack-Selenium-test.side as shown in the following figure:
   
   

Running tests on BrowserStack

Follow the below steps to execute the test on BrowserStack Automate:

1. Create a .side.yml file in the same folder where the BrowserStack-Selenium-test.side file is saved. Configure your Selenium test for desktop and mobile browsers by adding the capabilities and server in the .side.yml file as shown below:

# this is how your .side.yml should look like
capabilities:
    browserName: "Chrome"
    browserVersion: '107.0'
    'bstack:options':
      os: "Windows"
      osVersion: '10'
      resolution: '1024x768'
      sessionName: 'Selenium IDE automate W3C Desktop'
      buildName: 'Selenium IDE automate W3C Desktop'
      projectName: 'Selenium IDE automate W3C Desktop'
      debug: true
      consoleLogs: "verbose"
      networkLogs: true
server: "https://YOUR_USERNAME:YOUR_ACCESS_KEY@hub-cloud.browserstack.com/wd/hub"

# this is how your .side.yml should look like
capabilities:
    browserName: "safari"
    'bstack:options':
      deviceName: 'iPhone 14 Pro Max'
      osVersion: '16.0'
      sessionName: 'Selenium IDE automate W3C Mobile'
      buildName: 'Selenium IDE automate W3C Mobile'
      projectName: 'Selenium IDE automate W3C Mobile'
      debug: true
      consoleLogs: "verbose"
      networkLogs: true
server: "https://YOUR_USERNAME:YOUR_ACCESS_KEY@hub-cloud.browserstack.com/wd/hub"

1. You can execute tests on multiple OS and browser combinations. Check out the list of supported browsers and Operating Systems. As an example, to execute the test on OS X Catalina on Safari 13, add the following capabilities:
   • browserName: Safari
   • browser_version: 13.0
   • os: OS X
   • os_version: Catalina

2. Run the selenium test on BrowserStack by running the following command in the same directory.

    selenium-side-runner BrowserStack-Selenium-test.side
   

   It will run the test on BrowserStack Automate, and you can monitor the test in real-time on the Automate dashboard.