Skip to content

Commit 84183e2

Browse files
committed
add example for cypress test in tutorial
1 parent 1ff3d1b commit 84183e2

File tree

11 files changed

+183
-0
lines changed

11 files changed

+183
-0
lines changed

examples/19_cypress_test/.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules/
2+
package-lock.json
3+
mochawesome-report/

examples/19_cypress_test/Dockerfile

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
FROM cypress/included:13.6.6
2+
3+
RUN npm install
4+
5+
CMD [ "npm", "run-p", "start", "test" ]
+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const { defineConfig } = require('cypress');
2+
3+
module.exports = defineConfig({
4+
reporter: 'mochawesome',
5+
html: false,
6+
json: true,
7+
chromeWebSecurity: false,
8+
screenshotOnRunFailure: false,
9+
video: false,
10+
e2e: {
11+
// We've imported your old npm i -g npm-run-all plugins here.
12+
// You may want to clean this up later by importing these.
13+
setupNodeEvents(on, config) {},
14+
},
15+
});
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
describe('template spec', () => {
2+
it('passes', () => {
3+
cy.visit('http://localhost:8080');
4+
cy.get('.btn').should('contain', '0');
5+
cy.get('.btn').click();
6+
cy.get('.btn').should('contain', '1');
7+
cy.get('.btn').click();
8+
cy.get('.btn').should('contain', '2');
9+
cy.get('.btn').click();
10+
cy.get('.btn').should('contain', '3');
11+
});
12+
});
13+
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"name": "Using fixtures to represent data",
3+
"email": "[email protected]",
4+
"body": "Fixtures are a great way to mock data for responses to routes"
5+
}
6+
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// ***********************************************
2+
// This example commands.js shows you how to
3+
// create various custom commands and overwrite
4+
// existing commands.
5+
//
6+
// For more comprehensive examples of custom
7+
// commands please read more here:
8+
// https://on.cypress.io/custom-commands
9+
// ***********************************************
10+
//
11+
//
12+
// -- This is a parent command --
13+
// Cypress.Commands.add('login', (email, password) => { ... })
14+
//
15+
//
16+
// -- This is a child command --
17+
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
18+
//
19+
//
20+
// -- This is a dual command --
21+
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
22+
//
23+
//
24+
// -- This will overwrite an existing command --
25+
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// ***********************************************************
2+
// This example support/e2e.js is processed and
3+
// loaded automatically before your test files.
4+
//
5+
// This is a great place to put global configuration and
6+
// behavior that modifies Cypress.
7+
//
8+
// You can change the location of this file or turn off
9+
// automatically serving support files with the
10+
// 'supportFile' configuration option.
11+
//
12+
// You can read more here:
13+
// https://on.cypress.io/configuration
14+
// ***********************************************************
15+
16+
// Import commands.js using ES2015 syntax:
17+
import './commands'
18+
19+
// Alternatively you can use CommonJS syntax:
20+
// require('./commands')

examples/19_cypress_test/index.html

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Cypress Testing</title>
7+
<style>
8+
body{
9+
text-align: center;
10+
margin: 100px auto;
11+
}
12+
.btn{
13+
width: 20vw;
14+
height: 20vh;
15+
background-color: fuchsia;
16+
border: none;
17+
border-radius: 60px;
18+
font-size: 60px;
19+
cursor: pointer;
20+
}
21+
</style>
22+
</head>
23+
<body>
24+
<button data-test="btn-test" class="btn">0</button>
25+
26+
</body>
27+
<script>
28+
let count = 0;
29+
const btn = document.querySelector(".btn");
30+
btn.addEventListener("click", ()=>{
31+
count++;
32+
btn.textContent = count;
33+
})
34+
</script>
35+
</html>

examples/19_cypress_test/package.json

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "testing",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "cypress.config.js",
6+
"scripts": {
7+
"start": "http-server",
8+
"test": "cypress run --headless --reporter mochawesome && node parser.js"
9+
},
10+
"author": "",
11+
"license": "ISC",
12+
"dependencies": {
13+
"cypress": "^13.7.1",
14+
"http-server": "^14.1.1",
15+
"mochawesome": "^7.1.3",
16+
"run-p": "^0.0.0",
17+
"start": "^5.1.0",
18+
"test": "^3.3.0"
19+
}
20+
}
21+

examples/19_cypress_test/parser.js

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
const { time } = require('console');
2+
const { exit } = require('process');
3+
4+
try {
5+
const fs = require('fs');
6+
const resultFile = 'result.txt';
7+
const jsonData = fs.readFileSync(
8+
'./mochawesome-report/mochawesome.json',
9+
'utf8',
10+
(err, data) => {
11+
if (err) {
12+
console.error(err);
13+
return;
14+
}
15+
console.log(data);
16+
},
17+
);
18+
mochaObj = JSON.parse(jsonData);
19+
mochaStats = mochaObj['stats'];
20+
21+
fs.writeFile(
22+
resultFile,
23+
JSON.stringify({
24+
total_tests: mochaStats['tests'],
25+
test_passed: mochaStats['passes'],
26+
}),
27+
(err) => {
28+
if (err) {
29+
console.log(err);
30+
}
31+
},
32+
);
33+
} catch (err) {
34+
console.log('Error in parsing JSON file: ', err);
35+
}
36+
37+
setTimeout(() => {
38+
exit(1);
39+
}, 1000);

examples/19_cypress_test/result.txt

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"total_tests":1,"test_passed":1}

0 commit comments

Comments
 (0)