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:

1npm i cypress-action

Settings

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

1import "cypress-plugin-steps";
2require("cypress-action");
3import "cypress-file-upload";
4require("cypress-xpath");
5export const faker = require("generate-datafaker");
6import "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

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

1// Example of using the `action` command
2cy.action(
3  { attr: 'name="nam"', text: "Action description", maxAttempts: 8 },
4  null,
5  {
6    timeout: 10000000,
7  }
8).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

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

Selecting by Tag

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

Selecting by Xpath

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

Selecting by fullXPath

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

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

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

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

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

1// attribute
2cy.action({ attr: 'name="name"', text: "action por atributo" }).type(
3  "Teste com atributo"
4);
5our
6cy.action({ attr: 'placeholder="Nome completo"', text: "action por atributo" }).type(
7  "Teste com atributo"
8);
9
10<input type="text" name="name" placeholder="Nome completo">

1action({ attr: 'name="name"', text: "attr" })
2    .clear()
3    .type(faker.generateName());
4
5    action({
6      attr: "#page-walker > form > fieldset:nth-child(3) > div:nth-child(2) > div > input[type=text]",
7      text: "cssSelector",
8    })
9      .clear()
10      .type(faker.generateName());
11
12    action({
13      attr: '//*[@id="page-walker"]/form/fieldset[1]/div[2]/div/input',
14      text: "xpath",
15    })
16      .clear()
17      .type(faker.generateName());
18
19    action({
20      attr: "/html/body/div/div/form/fieldset[2]/div[4]/div[2]/input",
21      text: "full xpath",
22    }, null, {timeout: 10000})
23      .clear()
24      .type(faker.generateName());
25  });

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

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

cy.action ifElse

1it("Tests ifElse", () => {
2  // atributo
3  action({ attr: 'name="name"', text: "attr", ifExist: true }, (el) =>
4    el.type(faker.generateName())
5  );
6  //
7  action({ attr: 'name="nam"', text: "attr not exist", ifExist: true }, (el) =>
8    el.type(faker.generateName())
9  );
10  // cssSelector
11  action(
12    {
13      attr: "#page-walker > form > fieldset:nth-child(3) > div:nth-child(3) > div:nth-child(1) > input[type=text]",
14      text: "css selector",
15      ifExist: true,
16    },
17    (el) => el.type(faker.generateEmails())
18  );
19  // cssSelector element not exist
20  action(
21    {
22      attr: "#page-walker > form > fieldset:nth-child(3) > div:nth-child(3) > div:nth-child(1) > input[type=text]",
23      text: "css selector not exist",
24      ifExist: true,
25    },
26    (el) => el.type(faker.generateEmails())
27  );
28  // xpath
29  action(
30    {
31      attr: '//*[@id="page-walker"]/form/fieldset[1]/div[3]/div[2]/input',
32      text: "xpath element ",
33      ifExist: true,
34    },
35    (el) => el.type(faker.generateCPF())
36  );
37  // xpath element not exist
38  action(
39    {
40      attr: '//*[@id="page-walker"]/form/fieldset[1]/div[3]/div[2]/inpu',
41      text: "xpath element not exist",
42      ifExist: true,
43    },
44    (el) => el.type(faker.generateCPF())
45  );
46  //fullxpath
47  action(
48    {
49      attr: "/html/body/div/div/form/fieldset[2]/div[4]/div[2]/input",
50      text: "fullxpath elemen",
51      ifExist: true,
52    },
53    (el) => el.type(faker.generateStreet())
54  );
55  //fullxpath not exist
56  action(
57    {
58      attr: "/html/body/div/div/form/fieldset[2]/div[4]/div[2]/inpu",
59      text: "fullxpath element not exist",
60      ifExist: true,
61    },
62    (el) => el.type(faker.generateStreet())
63  );
64
65  // with options cypress
66  action(
67    {
68      attr: "/html/body/div/div/form/fieldset[2]/div[4]/div[2]/inpu",
69      text: "fullxpath element not exist",
70      ifExist: true,
71    },
72    (el) => el.type(faker.generateStreet()),
73    { timeout: 2000 }
74  );
75});

O cy.action integration generate-datafaker

Contributions

Contributions are always welcome. Feel free to open issues or send pull requests.

License

This project is licensed under the terms of the MIT License.