1.0.0 • Published 5 months ago
9-action v1.0.0
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
Settings
cy.action automatically adds dependencies to the project in e2e.js file
Uso
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: "my-selector", text: "Action description" },
{ timeout: 10000 }
).click(); // 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 astimeout
.
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">
cy.action({
attr: 'placeholder="Nome completo"',
ifExist: true,
}).type("Testando");
The cy.action with the parameter *ifElse: true* will cause, if the element is not found
cy.action will ignore it so as not to present an error.
cy.action({
attr: 'name="email"',
}).type("test@test.com");
cy.action without the *ifElse: false and wait: true* parameters will execute the test, and if the element is not found, it will try 6 times, always updating to try to find if the element becomes present.
To avoid waiting and presenting an error if the element is not found on the first attempt, just pass *wait: false*
cy.action({
attr: 'name="email"',
wait: false,
}).type("test@test.com");
O cy.action já vem integrado com o 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.
1.0.0
5 months ago