16-action NPM | npm.io

Cypress Action Command

Required

| NodeJs | Cypress version 10 >

This package provides a custom action command for Cypress, allowing you to perform various actions on DOM elements based on specific selectors and customization options.

Characteristics

Supports element selection via attributes, tags, CSS and XPath selectors.
Allows passing of Cypress options such as timeout.
Provides a personalized description for each action, improving the readability of test logs.

Installation

To install the package, run the following command in your Cypress project:

npm i cypress-action

Use Snippets in cy.action

action
action
actionIf
elseIf
test_bdd
test_action
test_bdd_BR
scenario
given
when
and
then
cenario
dado
quando
e
entao

Settings

cy.action automatically adds dependencies to the project in e2e.js file

import "cypress-plugin-steps";
require("cypress-action");
import "cypress-file-upload";
require("cypress-xpath");
export const faker = require("generate-datafaker");
import "cypress-wait-until";

Snippets

action actionIf

Use

The cy.action command can be used in your Cypress tests as follows:

`text` in cy.action

in cy.action the text parameter is not mandatory, but using it will help indicate the action, and use the visuals of your test

// Example of using the `action` command
cy.action({ attr: "my-selector" }).click(); // Options passed as second argument

// Example of using the `action` command
cy.action(
  { attr: 'name="nam"', text: "Action description", maxAttempts: 8 },
  null,
  {
    timeout: 10000000,
  }
).type("olá"); // Options passed as second argument

Parameters

attr: The element selector (string). It can be an attribute, tag, CSS or XPath selector.
text: A description of the action to be displayed in the logs.
options: Additional Cypress options, such as timeout.

Examples

Selecting by Attribute

cy.action({
  attr: "data-test-id=botao-login",
  text: "Clicking the login button",
}).type();

Selecting by Tag

cy.action({
  attr: "<button>",
  text: "Interacting with buttons",
}).click();

Selecting by Xpath

cy.action({
  attr: '//*[@id="page-walker"]/form/fieldset[1]/div[2]/div/input',
  text: "Interacting with buttons",
}).select();

Selecting by fullXPath

cy.action({
  attr: "/html/body/div/div/button",
  text: "Selecting button via XPath",
}).type();

cy.action({ attr: "<form>", text: "action mapeando caminho" })
  .find(".field")
  .find('[placeholder="Nome completo"]')
  .clear()
  .type("Teste buscando por camadas usando tags");

// attachFile
cy.action({ attr: 'type="file"', text: "attachFile include" }).attachFile(
  "image.png"
);

// cssSelector
cy.action({
  attr: "#page-walker > form > fieldset:nth-child(3) > div:nth-child(2) > div > input[type=text]",
  text: "action por selector",
})
  .clear()
  .type("Teste com selector");

// action not text
cy.action({ attr: 'name="name"' }).clear().type("Teste sem texto de ação");

// attribute
cy.action({ attr: 'name="name"', text: "action por atributo" }).type(
  "Teste com atributo"
);
our
cy.action({ attr: 'placeholder="Nome completo"', text: "action por atributo" }).type(
  "Teste com atributo"
);

<input type="text" name="name" placeholder="Nome completo">

action({ attr: 'name="name"', text: "attr" })
  .clear()
  .type(faker.generateName());

action({
  attr: "#page-walker > form > fieldset:nth-child(3) > div:nth-child(2) > div > input[type=text]",
  text: "cssSelector",
})
  .clear()
  .type(faker.generateName());

action({
  attr: '//*[@id="page-walker"]/form/fieldset[1]/div[2]/div/input',
  text: "xpath",
})
  .clear()
  .type(faker.generateName());

action(
  {
    attr: "/html/body/div/div/form/fieldset[2]/div[4]/div[2]/input",
    text: "full xpath",
  },
  null,
  { timeout: 10000 }
)
  .clear()
  .type(faker.generateName());

cy.action whith maxAttempts to inform how long to wait for the element to become visible

action({
  attr: '//*[@id="page-walker"]/form/fieldset[1]/div[2]/div/input',
  text: "xpath",
  maxAttempts: 4,
}).type(faker.generateName());

cy.action ifElse

it("Tests ifElse", () => {
  // atributo
  action({ attr: 'name="name"', text: "attr", ifExist: true }, (el) =>
    el.type(faker.generateName())
  );
  //
  action({ attr: 'name="nam"', text: "attr not exist", ifExist: true }, (el) =>
    el.type(faker.generateName())
  );
  // cssSelector
  action(
    {
      attr: "#page-walker > form > fieldset:nth-child(3) > div:nth-child(3) > div:nth-child(1) > input[type=text]",
      text: "css selector",
      ifExist: true,
    },
    (el) => el.type(faker.generateEmails())
  );
  // cssSelector element not exist
  action(
    {
      attr: "#page-walker > form > fieldset:nth-child(3) > div:nth-child(3) > div:nth-child(1) > input[type=text]",
      text: "css selector not exist",
      ifExist: true,
    },
    (el) => el.type(faker.generateEmails())
  );
  // xpath
  action(
    {
      attr: '//*[@id="page-walker"]/form/fieldset[1]/div[3]/div[2]/input',
      text: "xpath element ",
      ifExist: true,
    },
    (el) => el.type(faker.generateCPF())
  );
  // xpath element not exist
  action(
    {
      attr: '//*[@id="page-walker"]/form/fieldset[1]/div[3]/div[2]/inpu',
      text: "xpath element not exist",
      ifExist: true,
    },
    (el) => el.type(faker.generateCPF())
  );
  //fullxpath
  action(
    {
      attr: "/html/body/div/div/form/fieldset[2]/div[4]/div[2]/input",
      text: "fullxpath elemen",
      ifExist: true,
    },
    (el) => el.type(faker.generateStreet())
  );
  //fullxpath not exist
  action(
    {
      attr: "/html/body/div/div/form/fieldset[2]/div[4]/div[2]/inpu",
      text: "fullxpath element not exist",
      ifExist: true,
    },
    (el) => el.type(faker.generateStreet())
  );

  // with options cypress
  action(
    {
      attr: "/html/body/div/div/form/fieldset[2]/div[4]/div[2]/inpu",
      text: "fullxpath element not exist",
      ifExist: true,
    },
    (el) => el.type(faker.generateStreet()),
    { timeout: 2000 }
  );
});

elseIf action in element

// elseIf with input
cy.elseIf('input[name="cpf"]').type("07957743463", { force: true });

// else If with select
cy.elseIf('select[name="cpf"]')
  .value("07957743463")
  .select("07957743463", { force: true });

// else If with  button
cy.elseIf('button[name="cpf"]').click({ force: true });

// else If with  button and value/text
cy.elseIf('button[name="cpf"]').value("Click Me").click({ force: true });

// elseIf with label
cy.elseIf('label[name="cpf"]').value("Entry password").click({ force: true });

// elseIf with label
cy.elseIf('label[name="cpf"]').click({ force: true });

// Usando elseIf para selecionar um elemento com um seletor CSS específico
cy.elseIf("#meuElemento").click({ force: true });

// Especificando o tipo de tag para um elemento existente e tratando-o conforme necessário
cy.elseIf(
  "#page-walker > form > fieldset:nth-child(3) > div:nth-child(3) > div:nth-child(2) > select[type=text]"
)
  .value("minhaOpção")
  .select("minhaOpção", { force: true });

// Para um botão, por exemplo, apenas para verificar se existe
cy.elseIf("#meuBotao").value("Click Me").click({ force: true });

cy.elseIf(
  "#page-walker > form > fieldset:nth-child(3) > div:nth-child(2) > div > input[type=text]"
).type(faker.generateName(), { force: true });

Use BDD in cy.action

import { Dado, Cenario, faker, Quando, E, Entao } from "../support/e2e";

Cenario("", function () {
  Dado("", function () {}, {});
  Quando("", function () {}, {});
  E("", function () {}, {});
  Entao("", function () {}, {});
});

BDD whit options skip and only

import { Dado, Cenario, faker, Quando, E, Entao } from "../support/e2e";

Cenario("Tests", function () {

 Dado("Dado tests", function () {

 }, { skip: true });

 Quando("Quando tests", function () {

 }, { only: true });
});