Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sayururehan/test-automation-project
A beginner level project to learn about Test Automation using Mocha, Chai, Postman and Cypress
https://github.com/sayururehan/test-automation-project
chai cypress mocha postman test-automation-project testing
Last synced: 9 days ago
JSON representation
A beginner level project to learn about Test Automation using Mocha, Chai, Postman and Cypress
- Host: GitHub
- URL: https://github.com/sayururehan/test-automation-project
- Owner: SayuruRehan
- Created: 2024-03-15T10:09:52.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2024-03-15T14:10:54.000Z (8 months ago)
- Last Synced: 2024-10-11T22:42:44.685Z (about 1 month ago)
- Topics: chai, cypress, mocha, postman, test-automation-project, testing
- Language: JavaScript
- Homepage:
- Size: 6.84 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Basic Test Automation Project
This project is a beginner-level project to get hands-on experience in:
- Unit Testing
- API Testing
- E2E Testing (UI Testing)
We will be building a simple calculator using React and use tools and frameworks like **Mocha, Chai, Postman, and Cypress** to test out our application.
If you want to start the project from scratch, go ahead and follow these steps as a guided project;
## Setting up the backend
1. Create a directory and initialize an empty node project
```
mkdir automation
cd automation
mkdir calculator-api
cd calculator-api
npm init
```
2. Install Mocha and Chai as dev dependencies
```
npm install --save-dev mocha chai
```
3. Modify the 'package.json' to add test and test watch scripts
```
"scripts": {
"test": "mocha",
"test:watch": "mocha --watch --parallel --watch-files test/*"
},
```
4. Create a folder in VS Code root called 'test'
5. Create a js file for the tests 'test-calculator.js'
```
it("Is 5 + 2 = 7", (done) => {
// Define our test assertion
done();
});
```
6. Create a util.js file at the root level of calculator-api and implement the calculator
```
const calculator = {
add: (val1, val2) => val1 + val2,
subtract: (val1, val2) => val1 - val2,
multiply: (val1, val2) => val1 * val2,
};
export default calculator;
```
7. Make the Package.json type as module
```
"author": "",
"type": "module",
"license": "ISC",
```
8. Update the test-calculator.js by adding the test logic
```
import { expect } from "chai";
import calculator from "../util.js";
it("Is 5 + 2 = 7", (done) => {
// Define our test assertion
expect(calculator.add(5, 2)).to.equal(7);
done();
});
```
## Implementing the API
9. Install express library
```
npm install -s express
```
10. Implement the API with the POST add request
```
// Express web server implementation
import express from "express";
import calculator from "./util.js";
const app = express();
// Use the Json Middleware
app.use(express.json());
app.post("/api/add", async (req, res) => {
// Implement the api logic here
const { val1, val2 } = req.body;
const result = calculator.add(val1, val2);
res.send({ result });
});
app.listen(3000, () => {
console.log("API has started on port 3000");
});
```
11. Update the package.json to include the start script to start our API
```
"scripts": {
"start": "node index.js",
"test": "mocha",
"test:watch": "mocha --watch --parallel --watch-files test/*"
},
```
12. START the Server!!!
```
npm start
```
13. While the server is running open Postman
14. Configure Postman as below by creating a new request
- Enter the URL
- Change request method to POST
- Go to Body set the type as raw and select JSON. In the body section, write the below code as the request body:
```
{
"val1": 20,
"val2": 30
}
```
16. Create the test by navigating to the Test tab
```
pm.test("Is 20 + 30 = 50", function () {
var jsonData = pm.response.json();
pm.expect(jsonData.result).to.eql(50);
});
```
**Creating the Frontend
16. Setup a new Vite Project
```
npm create vite@latest
```
17. Run the Vite App
```
cd ui-calculator
npm install
npm run dev
```
18. Implement the application
```
import { useState } from "react";
import "./App.css";
function App() {
const [val1, setVal1] = useState();
const [val2, setVal2] = useState();
const [result, setResult] = useState();
const calculate = async () => {
const apiResult = await fetch("/api/add", {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify({
val1: parseInt(val1),
val2: parseInt(val2),
}),
});
const jsonResult = await apiResult.json();
setResult(jsonResult.result);
};
return (
<>
Awesome Calculator!
Enter Val1
setVal1(e.target.value)} />
Enter Val2
setVal2(e.target.value)} />
Result : {result}
>
);
}
export default App;
```
19. Edit the vite.config.js and add the proxy configuration
```
server: {
proxy: {
"/api": {
target: "http://localhost:3000",
},
},
},
```
## Creating UI Automation using Cypress
20. Create a directory called ui-automation
```
mkdir ui-automation
cd ui-automation
```
21. Init a npm project
```
npm init
```
22. Install Cypress in the project as a DevDependency
```
npm install --save-dev cypress
```
23. Opening the Cypress App
```
npx cypress open
```
24. Hit Configure E2E test -> Select Manual Spec Configuration (Not Scaffold Examples)
25. Write the spec
```
describe("template spec", () => {
it("passes", () => {
// Navigate to our app
cy.visit("http://localhost:5173");
cy.wait(1000);
// Enter 100 in the first text field
cy.get("input[data-test=val1]").type("100");
cy.wait(1000);
// Enter 200 in the second text field
cy.get("input[data-test=val2]").type("200");
cy.wait(1000);
// Click the calculate button
cy.get("input[data-test=calculate]").click();
cy.wait(2500);
//Check if the result is 300
cy.get("span[data-test=result").contains("300");
});
});
```
If the project ran successfully and if this repo helped. Please consider giving it a 🌟! Thanks! :octocat: