Table of content

Plugins in CypressIO

In cypress, Plugins allows us to modify the internal behavior/default behavior of the cypress. We can use the existing plugin or we can create a new plugin. Let us understand how to use the existing plugin.

Theme plugin

By using this plugin we can change the look of the test runner in cypress. There are two themes available in cypress, they are

  • Dark theme
  • Halloween theme

To use these themes we have to install the themes by giving the below command in the command line,

npm install --save-dev cypress-dark

In the cypress/support/index.js file, type the below configuration based on the required theme.

//Dark theme
require("cypress-dark");
//Halloween theme
require("cypress-dark/src/halloween");

Now after saving the index.js file, open the test runner of cypress and the themes will look like the below image.

plugin-themes-cypress

In cypress, we can only use the CSS selector. But we can use the XPath by installing the XPath plugin. Xpath supports various browsers in cypress. XPath is not preferred because the usage of the CSS selectors is simple when compared to the Xpath. They are shorter and easier to read.

Let us understand, and how to use the XPath plugin in cypress.

  • Type the below command in the command line to install the XPath plugin
    npm install cypress-xpath​
  • In the cypress\support\index.js file, type the below configuration to globally identify the XPath plugin in the VSCode.
    require("cypress-xpath");​
  • Now we are good to use the XPath plugin in cypress.

Instead of the cy.get() the command we are using the cy.xpath() the command to get the path of the webpage element.

Example program: In this program, we are going to get the logo of the https://chercher.tech/ website using Xpath.

xpath-css-cypress

describe("Xpaths with cypress example", () => {
  it("Usage of xpath", () => {
    Cypress.on("uncaught:exception", (err, runnable) => {
      // returning false here prevents Cypress from
      // failing the test
      return false;
    });
    cy.visit("https://chercher.tech/");
    //Xpath to get the element
    cy.xpath('//img[@id="logo"]').should("be.visible");
  });
});

Output :

xpath-plugin-cypress

Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions