Aller au contenu principal

Ajouter vos propres phrases

Cypress​

Installation des dépendances​

Depuis powershell ou un terminal cmd :

npm install --save-dev ts-loader

Ajout des types Typescripts​

info

Cette étape n'est nécessaire que si vous prévoyez de rajouter vos propres step_definitions.

Ajouter un nouveau fichier tsconfig.e2e.json pour inclure les types nécessaires :

tsconfig.e2e.json
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [
      "cypress",
      "@testing-library/cypress",
      "@uuv/cypress"
    ]
  },
  "files": [
    "uuv/cypress.config.ts"
  ],
  "include": [
    "src/**/*.cy.ts"
  ]
}

Ajout de vos propres phrases​

Créer un fichier .ts ou .js dans le dossier uuv/cucumber/step_definitions/.
Voici un exemple :

uuv/cucumber/step_definitions/my-custom-step-definitions.ts
import {Given, When, Then} from "@badeball/cypress-cucumber-preprocessor";

Given('My first custom step definition', () => {
    const myVar = 'foo';
    expect(myVar).to.eq('a foo');
});

Then('My second custom step definition', () => {
    // Your verification
    expect(true).to.eq(true);
});

Pour plus d'informations sur la mise en place de phrases cucumber, consulter cette documentation

(Optionnel) Utilisation des commandes Cypress UUV​

Lors de la rédaction de vos propres phrases, vous pouvez utiliser :

uuvGetContext(): Cypress.Chainable<Context>​

Retourne le contexte courant (élément Dom sélectionné & timeout) UUV

uuvCheckContextFocusedElement(): Cypress.Chainable<Context>​

Retourne élément Dom sélectionné dans le contexte UUV

uuvPatchContext(partOfContext: any): Chainable<Context>​

Mise à jour du contexte UUV

uuvFindByText(textToSearch: string, roleOptions: ByRoleOptions): Cypress.Chainable<JQuery<HTMLElement>>​

Recherche d'un élément à partir de son contenu textuel

uuvFindByTestId(testId: string): Cypress.Chainable<JQuery<HTMLElement>>​

Recherche d'un élément à partir de son attribut data-testid

uuvFindByRole(role: string, roleOptions: ByRoleOptions): Cypress.Chainable<JQuery<HTMLElement>>​

Recherche d'un élément à partir de son rôle accessible

uuvFindByLabelText(labelTextToSearch: string, roleOptions: ByRoleOptions): Cypress.Chainable<JQuery<HTMLElement>>​

Recherche d'un élément à partir de son libellé (idéal pour les champs de formulaire)

uuvFindAllByRole(role: string, roleOptions: ByRoleOptions): Cypress.Chainable<JQuery<HTMLElement>>​

Recherche tous les éléments correspondant à un rôle accessible

uuvFoundedElement(): Cypress.Chainable<JQuery<HTMLElement>>​

Retourne l'élément trouvé lorsqu'une recherche a été effectuée

Utilisation de vos propres phrases​

uuv/e2e/first-test.feature
Feature: Hello World

  Scenario: Search - Successful case
    When I visit path "https://e2e-test-quest.github.io/weather-app/"
    Then I should see a title named "Welcome to Weather App"
    And My second custom step definition

Playwright​

Ajout des types Typescripts​

info

Cette étape n'est nécessaire que si vous prévoyez de rajouter vos propres step_definitions.

Ajouter un nouveau fichier tsconfig.e2e.json pour inclure les types nécessaires :

tsconfig.e2e.json
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [
      "@uuv/playwright"
    ]
  },
  "include": [
    "uuv/cucumber/step_definitions/**/*.ts"
  ]
}

Ajout de vos propres phrases​

Créer un fichier .ts ou .js dans le dossier uuv/cucumber/step_definitions/.
Voici un exemple :

uuv/cucumber/step_definitions/my-custom-step-definitions.ts
import {Given, When, Then} from "@cucumber/cucumber";
import { expect } from "@playwright/test";
import { World } from "@uuv/playwright";

Given('My first custom step definition', async function () {
    const myVar = 'foo';
    expect(myVar).toBe('a foo');
});

Then('My second custom step definition', async function (this: World) {
    // Your verification
    expect(this.page.getByRole('heading', { name: 'Mon titre de page' })).toBeVisible();
});

Pour plus d'informations sur la mise en place de phrases cucumber, consulter cette documentation

Utilisation de vos propres phrases​

uuv/e2e/first-test.feature
Feature: Hello World

  Scenario: Search - Successful case
    When I visit path "https://e2e-test-quest.github.io/weather-app/"
    Then I should see a title named "Welcome to Weather App"
    And My second custom step definition