In cypress how can I check the response time of an action - cypress

Question

On clicking a button, I will get a dropdown with a list of items. I want to check how much time it takes for the drop down to come after clicking the button. I want to write a test using cypress for this to check performance. Intention is to check the performance of the app when the item list contains 100 thousands of values.

Answer 1

you can try something like this:
index2.html:
<div class="many">
</div>
<button id="manyadd">add many</button>
<script>
var prom = () => new Promise(resolve => {
var parent = document.querySelector(".many");
var e = document.createElement("div");
e.classList.add("red");
parent.append(e);
setTimeout(resolve, 1000);
})
async function createElement() {
for(var i = 0; i < 10; i++) {
await prom();
}
}
document.querySelector("#manyadd").addEventListener("click", () => createElement());
</script>
<style>
.red {
width: 100px;
height: 100px;
background-color: red;
}
</style>
and cypress code:
describe("many elements", () => {
beforeEach(() => {
cy.visit("index2.html");
})
it("wait until all elements", () => {
let t1 = null;
let t2 = null;
cy.get("#manyadd").then(b => b.click());
cy.get(".many > div").then(() => t1 = new Date());
cy
.get(".many > div", { timeout: 20000 })
.should(elements => {
expect(elements.length).to.eq(10);
t2 = new Date();
})
.then(() => cy.log(`duration: ${(t2.getTime()-t1.getTime())/1000} seconds`))
})
})
The example app code adds 10 div container and the cypress test waits until all are loaded. if you want exact times you may utilize MutationObserver but this is definitly more code than in my example :-P
Result: