Web Development with Selenium
Last updated
Last updated
This guide illustrates how to automatically test web development assignments in CodeGrade using Jest and Selenium.
Selenium is a powerful open-source testing tool for web development that allows you to test the webpages created by your students functionally. For instance, you may use Selenium to test that webpage page created by the student:
Contains the required html
elements such as tables, headings, and paragraphs;
Responds to user interaction as expected, for example, by using buttons and inputs.
To automatically test the CSS properties of the student's page, see the dedicated guide here.
Below, we are going to set up AutoTest to test the student's implementation of the Simon game. The student submission includes:
a html
file named index.html;
a javascript file namedgame.js
that implements the webpage functionalities;
the required jquery
library in its minified version;
a folder sounds
that contains the mp3
files to play when buttons are pressed;
optionally, a css
file that defines css
rules to enhance the webpage's appearance. This is not a necessary file here, as we won't be grading css
rules in this guide.
Below, you can download the submission folder for this assignment:
In the setup section of your AutoTest, you can install software or packages and upload any files you might need for testing. The setup section will build an image and is only run once for all submissions.
First, we need to install Node.js : drag the "Install Node" block to the setup step and select the preferred version in the dropdown.
The second step is to install the additional software we need using a Script Block:
# Update Ubuntu packages
sudo apt update
# Install Google Chrome
wget https://edgedl.me.gvt1.com/edgedl/chrome/chrome-for-testing/116.0.5845.96/linux64/chrome-linux64.zip &> /dev/null
unzip chrome-linux64.zip &> /dev/null
rm -f ./chrome-linux64.zip
chmod +x ./chrome-linux64/chrome
sudo ln -s ${PWD}/chrome-linux64/chrome /usr/local/bin/chrome
# Install Chrome dependencies
sudo apt install libxkbcommon0 libgbm-dev -y
# Install Chromedriver
wget https://edgedl.me.gvt1.com/edgedl/chrome/chrome-for-testing/116.0.5845.96/linux64/chromedriver-linux64.zip &> /dev/null
unzip chromedriver-linux64.zip &> /dev/null
rm -f chromedriver-linux64.zip
chmod +x ./chromedriver-linux64/chromedriver
sudo ln -s ${PWD}/chromedriver-linux64/chromedriver /usr/local/bin/chromedriver
# Install a headless display server
sudo apt install xvfb -y
# Install Jest
npm install -g jest eslint eslint-config-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-n eslint-detailed-reporter
This script installs the following software:
the Google Chrome web browser and its driver;
xvfb
, a display server that makes it possible to run a web browser using a virtual display;
jest
, the javascript unit test framework on which we run our selenium tests.
Next, we need to upload our fixtures, which in this case are:
The package.json
file that specifies all the node dependencies of the node project. This is where you have to list all the node packages the student may need for the project and you as a teacher may need to implement your tests. In our example, we just need to install the testing dependencies:
selenium-webdriver
: the node package to run selenium in node.js;
chromedriver
: the node package to run the Google Chrome browser;
jest-junit
: the node package that enables jest to write the unit test results in a xml
format.
{
"name": "game",
"version": "1.0.0",
"description": "test for Simon game",
"main": "game.js",
"scripts": {
"test": "jest"
},
"author": "codegrade",
"license": "ISC",
"dependencies": {
"selenium-webdriver":"",
"chromedriver":"",
"jest-junit":""
}
}
The game.test.js
file that contains the jest unit tests that use selenium to functionally test the student webpage.
Assuming that all the students are going to use the same set of node packages indicated in the previously uploaded package.json
file, it is convenient to install the node packages during the AutoTest Setup.
This saves time for the students as the same installation won't have to be executed each time a new submission is run. For this, simply drag and drop another Script Block and type:
# Move to the directory where the package.json file is
cd $UPLOADED_FILES
# Install the node packages indicated in the package.json file
npm install
The npm install
creates a folder named node_modules
inside the fixture folder. Later we can move this folder into the student directory where we run the tests.
Before running the tests we need to move all the necessary fixtures into the student directory. This should be done at the top of the Tests phase using a Script Block that runs the following command:
mv $UPLOADED_FILES/node_modules $UPLOADED_FILES/package.json $UPLOADED_FILES/game.test.js .
We can finally run the selenium tests. To do so , drag and drop a Custom Test Block and run the following commands:
# Run the unit tests and create a report file
xvfb-run jest --reporters=jest-junit --testTimeout=1000
# Parse the test report file to display results and compute the grade
cg unit-tests junitxml junit.xml
In line 2 we run jest
, the javascript unit testing framework, prepending it with xvfb-run
. This is needed as our selenium tests require a display to open the web browser; xvfb-run
allows to use a virtual display. The option --reporters=jest-junit
makes such that jest
creates an xml report file containing the results of the tests. The option --testTimeout=10000
indicates a 10 second timeout for each tests.
In line 5 we use the CodeGrade builtin command cg
to parse the xml report file produced by jest
. This visually displays the test results and computes a grade if required.
Optionally, you can:
connect the Custom Test Block to a rubric using a Connect Rubric Block;
hide information to the students about the run Block, such as its configuration and output.