npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

cypress-action

v1.5.3

Published

cypress.action is a project that aims to have a new framework to make cy.get easier, but this time you will be able to use it by attribute, tag, xpath, fullXpath and cssSelector

Downloads

138

Readme

Cypress Action Command

cypress cypress xpath generate-datafaker fileUpload

generate-datafaker

generate-datafaker

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_action

test_des_its

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";

Configuration use ENV

in cypress.env.json

{
  "environment": "QA",
  "QA": {
    "url": "https://jamesonbatista.github.io/projectqatesterweb"
  },
  "DEV": {
    "url": "https://jamesonbatista.github.io/projectqatesterweb"
  }
}

in test

describe("Describe testing", function () {
  before(() => {
    cy.visit("url");
  });
})

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

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

cy.action({ attr: "my-selector" }, { timeout: 10000 }).click();

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: 'name="name"', text: "attr" })
  .clear()
  .type(faker.generateName());

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

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

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

Iframe

cy.iframe('iframe')

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

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

elseIf action in element

// elseIf with input
cy.elseIf('input[name="cpf"]').type("07957743463");

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

// else If with  button
cy.elseIf('button[name="cpf"]').click();

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

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

// elseIf with label
cy.elseIf('label[name="cpf"]').click();

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

// 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");

// 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());

Mixed Functions

cy.action({ attr: selects.fillName })
  .click()
  .elseIf('input[name="name"]')
  .type("Test");

cy.action({ attr: selects.fillEmail })
  .click()
  .act('name="email"') //action
  .type("Test#test.com");

cy.action({ attr: selects.fillName })
  .click()
  .If('input[name="name"]') // elseIf
  .type("Test");

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 });
});

Use cy.visit config

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
  viewportHeight: 1000,
  viewportWidth: 1400,

  env: {
    title: "Tests With Cypress and cy.action 💥",
    subTitle: "CY.ACTION presentation",
    styles: {
      background: "red",
      text: "green",
    },
  },
});

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.