Tu je postup, ako používam Cypress na overenie, že používateľské rozhranie, ktoré budujem, zobrazuje informácie o dátumoch zoradené chronologicky. Uvažuj o zozname dátumov servovaných na porte 3000, ktorý vyzerá takto:

<ul id="sorted">
  <li>14.12.1999</li>
  <li>12.03.1975</li>
  <li>28.02.2001</li>
  <li>20.08.2010</li>
  <li>05.07.2018</li>
</ul>

Žijem v Európe a formát, v akom tu píšeme dátumy, je dd.mm.yyyy

  • Začni inštaláciou dev závislostí Cypress
npm i -D cypress start-server-and-test date-fns
  • Vytvor cypress.json a uisti sa, že port zodpovedá portu tvojej aplikácie
{
  "baseUrl": "http://localhost:3000"
}
  • Uprav package.json a prispôsob ho svojim potrebám, pričom tiež nastav správny port aplikácie
"scripts": {
    "dev": "node .",
    "cy:run": "cypress run",
    "test": "start-test dev 3000 cy:run"
  }
  • Inicializuj Cypress
npx cypress run && mkdir -p cypress/integration
  • Vytvor test v cypress/integration/spec.js
/// <reference types="cypress" />
import { parse } from "date-fns"

describe("Date list should", () => {
  it("have dates sorted chronologically", () => {
    cy.visit("/")

    const parseDate = date => parse(date, "dd.MM.yyyy", new Date())
    let prevDate = parseDate("01.01.1970")

    cy.get("ul#sorted li").each($pre => {
      const currentDate = parseDate($pre.text())
      expect(prevDate).to.be.lte(currentDate)

      prevDate = currentDate
    })
  })
})
npm run test

Hotovo!

Zdrojové kódy sú dostupné v repozitári

Odkazy #