Running Selenium with JavaScript in Github Actions
1. Install Selenium WebDriver for Node.js
First, you’ll need to install the necessary packages. You can do this using npm:
npm init -y
npm install selenium-webdriver2. Basic Selenium Script in JavaScript
Below is a simple script that opens a browser, navigates to a website (e.g., Google), performs a search, and then closes the browser.
// Import the selenium-webdriver module
const { Builder, By, Key, until } = require('selenium-webdriver');
(async function example() {
// Create a new instance of the Chrome driver
let driver = await new Builder().forBrowser('chrome').build();
try {
// Navigate to Google
await driver.get('https://www.google.com');
// Find the search box by its name attribute and type a query
await driver.findElement(By.name('q')).sendKeys('Selenium WebDriver', Key.RETURN);
// Wait until the results page is loaded and display the title
await driver.wait(until.titleContains('Selenium WebDriver'), 1000);
// Print the title of the page to the console
let title = await driver.getTitle();
console.log(`Page title is: ${title}`);
} finally {
// Quit the browser
await driver.quit();
}
})();3. Running the Script
To run the script, save it in a file, say selenium-test.js, and execute it using Node.js:
node selenium-test.js4. Requirements
- Ensure you have Chrome installed, as the example uses the Chrome browser.
- Ensure the appropriate browser driver (e.g., ChromeDriver) is installed and accessible in your PATH.
This basic example demonstrates how to start with Selenium WebDriver using JavaScript, including navigating to a webpage, interacting with elements, and closing the browser when done.
Get Pradap Pandiyan’s stories in your inbox
Join Medium for free to get updates from this writer.
To generate a report from your Selenium WebDriver tests using JavaScript, you can integrate a reporting library such as Mochawesome if you’re using Mocha as your test framework. Below is a step-by-step guide on how to set this up and generate a report.
5. Set Up Mocha and Mochawesome
First, you’ll need to install Mocha (a popular testing framework for Node.js) and Mochawesome (a reporting tool):
npm install mocha mochawesome --save-dev6. Create a Test Script
Here’s an example test script using Mocha and Selenium WebDriver, along with the configuration to generate a Mochawesome report:
const { Builder, By, Key, until } = require('selenium-webdriver');
const assert = require('assert');
describe('Google Search Test', function() {
let driver;
// Increase timeout for tests
this.timeout(30000);
before(async function() {
// Set up Chrome driver in headless mode
const chrome = require('selenium-webdriver/chrome');
const options = new chrome.Options();
options.addArguments('--headless', '--no-sandbox', '--disable-dev-shm-usage');
driver = await new Builder().forBrowser('chrome').setChromeOptions(options).build();
});
after(async function() {
await driver.quit();
});
it('should open Google and search for Selenium WebDriver', async function() {
await driver.get('https://www.google.com');
await driver.findElement(By.name('q')).sendKeys('Selenium WebDriver', Key.RETURN);
await driver.wait(until.titleContains('Selenium WebDriver'), 1000);
const title = await driver.getTitle();
assert.strictEqual(title.includes('Selenium WebDriver'), true);
});
});
This is what the test execution looks like once the test is executed we will have the report generated.
7. Configure Mocha for Mochawesome Reporting
Create a Mocha configuration file or run Mocha with the necessary options directly. Here’s how you can do it:
Option 1: Using a Mocha Configuration File
Create a mocha.opts file in the test directory (or mocharc.json in the root directory) with the following content:
--reporter mochawesome
--reporter-options reportDir=mochawesome-report,reportFilename=index,quiet=trueOption 2: Run Mocha with Reporter Options Directly
Alternatively, you can run Mocha from the command line with the reporter options:
npx mocha --reporter mochawesome --reporter-options reportDir=mochawesome-report,reportFilename=index,quiet=truen
This is how the mochawesome report will look. For testing purposes, I have added only one test.
8. Integrate with GitHub Actions
To run your tests and generate the report within a GitHub Actions workflow, modify the workflow file:
name: Run Selenium Tests and Generate Report
on:
push:
branches:
- main
pull_request:
branches:
- main
jobs:
run-selenium:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v3
- name: Set up Node.js
uses: actions/setup-node@v3
with:
node-version: '18'
- name: Install dependencies
run: npm install
- name: Run Selenium tests and generate report
run: npx mocha --reporter mochawesome --reporter-options reportDir=mochawesome-report,reportFilename=index,quiet=true
- name: Upload Mochawesome report
uses: actions/upload-artifact@v3
with:
name: mochawesome-report
path: mochawesome-report
9. Accessing the Report
After the workflow runs, the report will be generated in the specified directory (mochawesome-report in this case) and will be uploaded as an artifact. You can download it from the GitHub Actions run summary.
10. Viewing the Report
The report generated by Mochawesome is an HTML file that you can view in a browser. Simply download the artifact and open index.html in the mochawesome-report directory.
This setup provides you with a comprehensive HTML report that includes the results of your Selenium WebDriver tests, along with detailed information and screenshots if you configure that feature.
For testing purposes its only 1 test case and it's running on a headless mode. This can be customized based on the requirements of the project.
Conclusion:
By following the steps outlined in this guide, you can seamlessly run your selenium javascript code with the GitHub actions.
I have created a project on GitHub and added the code here.
Feel free to hit clap if you like the content. Happy Automation Testing :) Cheers. 👏
