Candidate Review Automated Testing - Test Scenarios Implementation

Challenge Overview

 

Welcome to Candidate Review Automated Testing - Test Scenario Implementation challenge. In this challenge, we aim to implement BDD test scenarios identified in a previous challenge for a simple responsive web application.

Project Overview

In this project we will be:

• Identifying test scenarios for a responsive web application

• Automating the identified test scenarios

• Running the tests against candidate apps

Technology Stack

• Cucumber/Gherkin

• Selenium

• NodeJS

 

Assets

Application requirements are described below. Test scenarios are available in the project repository. See forums for access to Gitlab.

 

Individual requirements

We’re planning to build a simple responsive web application, but before actually starting to build anything we have created a set of detailed test scenarios. Your task in this challenge is to 

1. Implement the Cucumber (Gherkin) scenarios, and

2. Develop a sample web app that passes the tests

Application details: It’s the end of the semester and university students are eager to see their grades.   Provided a list of Grades, create a web application that displays the semester results. 

• Add a Toolbar at the top of page that has an option to filter by student name.

• Display all the Grade data that scales for desktop and mobile viewports (display width 320-1920)

• Below is a sample layout, formatting the data in a list.
  Desktop viewport
  
  Mobile viewport
  

• On mobile viewports, it is not encouraged to show the same amount of information as the Desktop.  The information to display is listed below from most important to least important: 

  • Grade 

  • Student Name

  • Class Name

  • Teacher Name 

  • Meta Data Items

• Visualize the Grades using the ‘Grade A’, through ‘Grade F’ PXBlue icons.

• •    Calculate the grades using the following tiers:

  • A:  100% - 90%

  • B:  <90% - 80%

  • C:  <80% - 70%

  • D:  <70% - 60%

  • F:  <60%

• The List of Grades should be responsive, and data should be removed in the following order:

  • Meta Data

  • Date

• The list of Grades should be sorted by grade, highest to lowest, and then sub-sorted by student name in descending order (A appears before Z). 

Each Grade has the following schema: 

type Grade = {

    grade: number;

    className: string;

    teacherName: string;

    studentName: string;

    metaData: GradeMetaData[];

}

type GradeMetaData = {

    data: string;

    backgroundColor: string;

}

 

Data will be loaded from a json file loaded from http://localhost:5000/data 

Sample mockups for the demo app are available here

Test scenarios details: Each test scenario has a background or outline that defines the dataset available for that test. When running the test the dataset file should be created and served at localhost:5000/data so the target app can load it. To verify the presence of various elements on the page, define css class names for each one (ex search box, heder, results table, result item, student name, etc) and make sure to document them in the test suite readme - we will use the same test suite to run it against other implementations for the same app, so it is important to clearly define those details.

What to submit

• Submit the git patch for the test suite

• Submit the full code for the demo app

Final Submission Guidelines

See above