Własne komendy w Cypressie do testowania aplikacji Angularowej

Na początku trzeba oczywiście dodać Cypressa do projektu:

npm i cypress -D

Następnie ułatwiamy sobie życie poprzez edycję skryptów w package.json:

"cypress:open": "cypress open",
"cypress:run": "cypress run"

Dodanie niestandardowej komendy jest dosyć proste. W katalogu Cypressa znajduje się folder support. Dodajemy tam plik, który będzie zawierał implementację nowej komendy. Nazwa jest dowolna, w moim przypadku będzie to test.ts:

declare namespace Cypress {
    interface Chainable {
      newCommand(): Chainable<any>,
    }
  }

Cypress.Commands.add('newCommand', () => {
    return cy.request('https://duckduckgo.com');
})

Mamy już dodaną nową komendę oraz zdefiniowany interfejs, który ją definiuje. Musimy teraz powiedzieć Cypressowi gdzie ma jej szukać. W pliku cypress.config.ts należy zmienić ustawienie supportFile z false na ścieżkę do utworzonego pliku:

"supportFile": "cypress/support/test.ts"

Gotowe. Od teraz możemy używać nowej komendy w testach:

describe('Sample test suite', () => { 
  it('Can run user defined commands', () => {
    cy.newCommand();
  })
})

Często zdarza się, że musimy stworzyć więcej plików definiujących nasze komendy. Łatwiej jest je wtedy pogrupować. W takiej sytuacji wystarczy stworzyć plik index.ts z importami. Następnie wskazać index.ts w konfiguracji Cypresa (ustawienie supportFile).