{"id":28179869,"url":"https://github.com/sadeeshaperera/test-automation-project","last_synced_at":"2025-10-18T10:06:54.324Z","repository":{"id":292200630,"uuid":"976188223","full_name":"SadeeshaPerera/test-automation-project","owner":"SadeeshaPerera","description":"test-automation-project","archived":false,"fork":false,"pushed_at":"2025-05-08T16:15:55.000Z","size":5349,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-08T17:29:26.013Z","etag":null,"topics":["api-testing","cypress","e2e-testing","qa-automation","qaops","test-automation","unit-testing"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SadeeshaPerera.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-01T16:53:23.000Z","updated_at":"2025-05-04T20:57:19.000Z","dependencies_parsed_at":"2025-05-08T17:39:51.059Z","dependency_job_id":null,"html_url":"https://github.com/SadeeshaPerera/test-automation-project","commit_stats":null,"previous_names":["sadeeshaperera/test-automation-project"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SadeeshaPerera%2Ftest-automation-project","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SadeeshaPerera%2Ftest-automation-project/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SadeeshaPerera%2Ftest-automation-project/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SadeeshaPerera%2Ftest-automation-project/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SadeeshaPerera","download_url":"https://codeload.github.com/SadeeshaPerera/test-automation-project/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254453560,"owners_count":22073618,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api-testing","cypress","e2e-testing","qa-automation","qaops","test-automation","unit-testing"],"created_at":"2025-05-16T02:13:46.903Z","updated_at":"2025-10-18T10:06:54.224Z","avatar_url":"https://github.com/SadeeshaPerera.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Basic Test Automation Project\n\nThis project is a beginner-level project to get hands-on experience in:\n- Unit Testing\n- API Testing\n- E2E Testing (UI Testing)\n\nWe will be building a simple calculator using React and use tools and frameworks like **Mocha, Chai, Postman, and Cypress** to test out our application.\n\nIf you want to start the project from scratch, go ahead and follow these steps as a guided project;\n\n## Setting up the backend\n1. Create a directory and initialize an empty node project\n   \n    ```\n    mkdir automation\n    cd automation\n    mkdir calculator-api\n    cd calculator-api \n    npm init\n    ```\n\n2. Install Mocha and Chai as dev dependencies\n   \n     ```\n     npm install --save-dev mocha chai\n     ```\n\n3. Modify the 'package.json' to add test and test watch scripts\n\n     ```\n     \"scripts\": {\n       \"test\": \"mocha\",\n       \"test:watch\": \"mocha --watch --parallel --watch-files test/*\"\n     },\n     ```\n\n4. Create a folder in VS Code root called 'test'\n   \n5. Create a js file for the tests 'test-calculator.js'\n\n     ```\n     it(\"Is 5 + 2 = 7\", (done) =\u003e {\n       // Define our test assertion\n      \n      \n       done();\n     });\n     ```\n\n6. Create a util.js file at the root level of calculator-api and implement the calculator\n\n     ```\n    const calculator = {\n     add: (val1, val2) =\u003e val1 + val2,\n     subtract: (val1, val2) =\u003e val1 - val2,\n     multiply: (val1, val2) =\u003e val1 * val2,\n    };\n    export default calculator;\n     ```\n\n7. Make the Package.json type as module\n\n     ```\n    \"author\": \"\",\n     \"type\": \"module\",\n     \"license\": \"ISC\",\n     ```\n\n8. Update the test-calculator.js by adding the test logic\n\n     ```\n    import { expect } from \"chai\";\n    import calculator from \"../util.js\";\n    \n    it(\"Is 5 + 2 = 7\", (done) =\u003e {\n     // Define our test assertion\n     expect(calculator.add(5, 2)).to.equal(7);\n     done();\n    });\n     ```\n\n## Implementing the API\n9. Install express library\n     ```\n      npm install -s express\n     ```\n\n10. Implement the API with the POST add request\n     ```\n    // Express web server implementation\n    import express from \"express\";\n    import calculator from \"./util.js\";\n      \n    const app = express();\n    // Use the Json Middleware\n    app.use(express.json());\n      \n    app.post(\"/api/add\", async (req, res) =\u003e {\n     // Implement the api logic here\n     const { val1, val2 } = req.body;\n     const result = calculator.add(val1, val2);\n     res.send({ result });\n    });\n      \n    app.listen(3000, () =\u003e {\n     console.log(\"API has started on port 3000\");\n    });\n     ```\n\n11. Update the package.json to include the start script to start our API\n     ```\n    \"scripts\": {\n       \"start\": \"node index.js\",\n       \"test\": \"mocha\",\n       \"test:watch\": \"mocha --watch --parallel --watch-files test/*\"\n     },\n     ```\n\n12. START the Server!!!\n     ```\n      npm start\n     ```\n\n13. While the server is running open Postman\n\n14. Configure Postman as below by creating a new request\n    - Enter the URL\n    - Change request method to POST\n    - Go to Body set the type as raw and select JSON. In the body section, write the below code as the request body:\n\n    ```\n      {\n        \"val1\": 20,\n        \"val2\": 30\n      }\n     ```\n\n16. Create the test by navigating to the Test tab\n     ```\n      pm.test(\"Is 20 + 30 = 50\", function () {\n         var jsonData = pm.response.json();\n         pm.expect(jsonData.result).to.eql(50);\n      });\n     ```\n\n**Creating the Frontend\n16. Setup a new Vite Project\n     ```\n      npm create vite@latest\n     ```\n\n17. Run the Vite App\n     ```\n      cd ui-calculator\n\t    npm install\n\t    npm run dev\n     ```\n\n18. Implement the application\n     ```\n      import { useState } from \"react\";\n      import \"./App.css\";\n      \n      \n      function App() {\n       const [val1, setVal1] = useState();\n       const [val2, setVal2] = useState();\n       const [result, setResult] = useState();\n      \n      \n       const calculate = async () =\u003e {\n         const apiResult = await fetch(\"/api/add\", {\n           method: \"POST\",\n           headers: {\n             Accept: \"application/json\",\n             \"Content-Type\": \"application/json\",\n           },\n           body: JSON.stringify({\n             val1: parseInt(val1),\n             val2: parseInt(val2),\n           }),\n         });\n         const jsonResult = await apiResult.json();\n         setResult(jsonResult.result);\n       };\n      \n      \n       return (\n         \u003c\u003e\n           \u003ch2\u003e Awesome Calculator! \u003c/h2\u003e\n           \u003clabel\u003eEnter Val1 \u003c/label\u003e\n           \u003cinput type=\"text\" onChange={(e) =\u003e setVal1(e.target.value)} /\u003e\n           \u003cbr /\u003e\n           \u003clabel\u003eEnter Val2 \u003c/label\u003e\n           \u003cinput type=\"text\" onChange={(e) =\u003e setVal2(e.target.value)} /\u003e\n           \u003cbr /\u003e\n           \u003cbr /\u003e\n           \u003cinput type=\"button\" onClick={calculate} value=\"Calculate\" /\u003e\n           \u003cbr /\u003e\n           \u003cbr /\u003e\n           \u003clabel\u003eResult : {result}\u003c/label\u003e\n         \u003c/\u003e\n       );\n      }\n      \n      \n      export default App;\n      \n     ```\n\n19. Edit the vite.config.js and add the proxy configuration\n     ```\n      server: {\n         proxy: {\n           \"/api\": {\n             target: \"http://localhost:3000\",\n           },\n         },\n       },\n     ```\n\n## Creating UI Automation using Cypress\n20. Create a directory called ui-automation\n     ```\n      mkdir ui-automation\n      cd ui-automation\n     ```\n\n21. Init a npm project\n     ```\n      npm init\n     ```\n\n22. Install Cypress in the project as a DevDependency\n     ```\n      npm install --save-dev cypress\n     ```\n\n23. Opening the Cypress App\n     ```\n\t    npx cypress open \n     ```\n\n24. Hit Configure E2E test -\u003e Select Manual Spec Configuration (Not Scaffold Examples)\n\n25. Write the spec\n     ```\n      describe(\"template spec\", () =\u003e {\n       it(\"passes\", () =\u003e {\n         // Navigate to our app\n         cy.visit(\"http://localhost:5173\");\n         cy.wait(1000);\n       \n         // Enter 100 in the first text field\n         cy.get(\"input[data-test=val1]\").type(\"100\");\n         cy.wait(1000);\n         \n         // Enter 200 in the second text field\n         cy.get(\"input[data-test=val2]\").type(\"200\");\n         cy.wait(1000);\n      \n         // Click the calculate button\n         cy.get(\"input[data-test=calculate]\").click();\n         cy.wait(2500);\n      \n         //Check if the result is 300\n         cy.get(\"span[data-test=result\").contains(\"300\");\n       });\n      });\n\n     ```\n\nIf the project ran successfully and if this repo helped. Please consider giving it a 🌟! Thanks! :octocat:\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsadeeshaperera%2Ftest-automation-project","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsadeeshaperera%2Ftest-automation-project","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsadeeshaperera%2Ftest-automation-project/lists"}