Table of Contents
Project contains Automated Test written in TypeScript/JavaScript using Protractor as an open source automation testing framework. Also, comes with Jasmine that follows BDD framework, and Jasmine spec reporter, protractor beautiful reporter for real time generation of reports and html reports.
My task is to automate testing of www.saleschamp.nl, in the careers page. The automated test covers the following test scenarios
- A candidate would like to see open positions in SalesChamp.
- A candidate would like to apply for the Backend role advertised on the SalesChamp site.
To get automated test in your local copy up and running follow these simple example steps.
To publish and install packages to and from the public npm registry or a private npm registry, you must install Node.js and the npm command line interface using either a Node version manager or a Node installer.
Note: to download the latest version of npm, on the command line, run the following command:
npm install -g npmPlease refer to the following
-
Clone the repo
git clone https://github.com/veydecapia/saleschamp-exercise.git
-
Install NPM packages. This downloads dependencies defined in a package.json file and generates a node_modules folder with the installed modules.
npm run setup
This is equivalent to the following command:
npm install && node ./node_modules/protractor/bin/webdriver-manager updateIt would install first the required npm packages and then it will update the webdriver. This is written in package.json file under scripts.
Note: The webdriver-manager is a helper tool to easily get an instance of a Selenium Server running. Use it to download the necessary binaries.
- To run the created Automated test.
Run npm
npm test
This will run the automated test that covers both the following scenarios:
- A candidate would like to see open positions in SalesChamp.
- A candidate would like to apply for the Backend role advertised on the SalesChamp site.
- While the test is running, the Jasmine Spec reporter will send updates of the test pass fail status on the command line in real time.
To demonstrate parallel test, maxInstances is set to 2. Two instances of chrome will be instantiated and both home.spec.ts and careers.spec.ts will run at the same time.
- After the browser is closed, you can look for the text 0 instance(s) of WebDriver still running, and you know that the run is already completed.
[08:46:20] I/testLogger -
[08:46:20] I/launcher - 0 instance(s) of WebDriver still running
[08:46:20] I/launcher - chrome #01-0 passed
[08:46:20] I/launcher - chrome #01-1 passed
4. After the test, go to reports\testResults folder.
You should see a HTML Test Report, SalesChampAutomationReport.html. Open and see the summary result.
You can view the screenshot for each of the test cases available. (e.g.Should have the correct page title) provides you a screenshot.
Sample generated report for reference: reports.zip
-
[Protractor] - Test Framework/Test Runner
- It is built and runs on top of WebDriverJS, which also uses WebDriver API same as Selenium giving all the advantages of Selenium.
- Protractor is an open source automation testing framework that is writen using NodeJS. It also focuses on cross-browser automation; its value proposition is a single standard API that works across all major browsers.
- Protractor can automate the different browsers like chrome, firefox, IE, Edge, opera. A puppeteer can automate the chromium engine only, as of today Chrome and Microsoft Edge browsers are using the Chromium engine.
- Unlike other test runners like Puppeteer, focuses and only works on a Chromium engine.
- Protractor allows for automated parallel Cross Browser Testing, so it saves time and resources. Hence, ensures Cross Browser compatibility.
- Supports asynchronous Test Execution, uses callbacks, Promises, and Async/Await to improve performance and make the test run faster.
- It supports Jasmine and Mocha as BDD test frameworks out of the box.
- Working with packages is easier in Protractor.
- Supports various cloud testing platforms like SauceLabs, and CrossBrowserTesting, etc.
- It can run in both a Real browser and headless browsers.
-
[Jasmine] - Test Framework
- Follows BDD (Behavior-driven development).
- All the syntax used in Jasmine framework is clean and obvious.
- Have an easy to read syntax.
- Easy to implement.
- Capable of testing any kind of JavaScript application.
- Jasmine does not depend on any other JavaScript framework.
- Jasmine does not require any DOM.
-
[Visual Studio Code/ VSCode] - IDE/Text Editor
- Visual Studio Code has a large catalog different extensions to extend its own capabilities.
- Visual Studio Code Supports debugging for Typescript/Javascript based applications.
- Visual Studio Code (VSCode) is the most popular development environment.
Note:
- Please note that Captcha cannot be automated.
- We need to request for A developer to remove captcha functionality on a testing environment.
- When dealing with a Production environment, Captcha can temporarily be disabled.
- As a result, I use assertion on alert text box instead. To verify the submission of the role application.
| User Actions | Elements | Why? |
|---|---|---|
| Go to Home Page | heroTitle | -For Home Page verification and know that automation is in the correct page. |
| Navigational Elements | navigationHeaderItems | -For Home Page verification and know that automation is in the correct page. |
| headerLogo | ||
| careersLink | ||
| pricingLink | ||
| contactUsLink | ||
| Go to Careers Page | heroTitle | -For Careers Page verification and know that automation is in the correct page.-Also used as a setup to view open positions |
| heroParagraph | ||
| applyNowBtn | ||
| viewHotRolesBtn | ||
| openPositionsSection | ||
| View Open Positions | cardRole | -For automated viewing of Open positions based on the data provided on roleData.json -Also used as a setup to apply for a role |
| roleNameLbl | ||
| roleDescriptionLbl | ||
| viewDetailsPlusSignBtn | ||
| cardRoleApplyNowBtn | ||
| Apply for a Role | careersFormSection | -For automated role application of Open positions based on the data provided on applyRoleData.json |
| applyForARoleLbl | ||
| fillOutInstructionsLbl | ||
| nameTxtbox | ||
| emailAddressTxtbox | ||
| messageTxtArea | ||
| submitBtn | ||
| formDoneBlock |
Please refer to Installation and Usage.
Your Name - [email protected]
Project Link: https://github.com/veydecapia/saleschamp-exercise