В кипарисе как проверить время отклика на действие

Question

При нажатии на кнопку я получу выпадающий список со списком предметов. Я хочу проверить, сколько времени потребуется, чтобы выпадающий список появился после нажатия кнопки. Я хочу написать тест, используя кипарис для этого, чтобы проверить производительность. Намерение заключается в проверке производительности приложения, когда список элементов содержит 100 тысяч значений.

Answer 1

вы можете попробовать что-то вроде этого:

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>

и код кипариса:

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`))
    })
})

Пример кода приложения добавляет 10 контейнер div и проверка кипариса ждут пока все не загрузятся. если вы хотите точное время, вы можете использовать MutationObserver, но это определенно больше кода, чем в моем примере: -P

Результат: