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.
By using this plugin we can change the look of the test runner in cypress. There are two themes available in cypress, they are
To use these themes we have to install the themes by giving the below command in the command line,
npm install --save-dev cypress-darkIn the cypress/support/index.js file, type the below configuration
//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.
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.
npm install cypress-xpathrequire("cypress-xpath");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.
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 :