How to use findbytext in Cypress?

Locating elements in dynamic web apps can be tricky. While cy.contains () works for simple cases, it much fails when multiple elements share the like text. This is where findByText from Cypress Testing Library help testers locate elements more faithfully.

This article describes how the Cypress Testing Library ’ s findByText command simplifies locating elements by seeable schoolbook, improving test legibility, reliability, and maintainability in dynamic web applications.

What is Cypress Testing Library?

allows you to locate the web elements habituate the DOM testing inquiry used primarily for the manual testing approach. With this add-on, we can use the queries to regain the web elements that need a more specific approach to locate.

• The Cypress Testing Library utilizationfindBy, findAllBy, queryBy,and queryByAllbidding off of thecy globular bid, which will be approachable globally.
• From all these bid at present, it has come down tofindBy and findAllBy as it has be modified to contain all the possible outcomes within a Cypress testing scenario.
• So now, we can write the Cypress tests without having to use thequeryBy and queryByAllcommands, which is an added advantage when it comes to code reusability.
• This library is also compatible with DOM node jQuery, allowing the user to prove almost any web application.

Pro tip: Tools like SUSA can handle this autonomously — upload your app and get results without writing a single test script.

Cypress findbytext ()

When using theCypress Testing Library, the findBymap utilise many suffix such as proxy, text, role, etc. Out of these functions, the function“ findbytext () ”is a usually and frequently utilise function. With this function, we can get the constituent being read with the text we are enrol. So basically, this function render any web ingredient with the text we enter as the argument for the part.

Sometimes several elements bear the same text, and these situations tend us to combine some strategy to get the factor we desire returned.

• Using the “within” API to narrow the search area: We can narrow the lookup area by searching within a sure web factor, such as a form.

• Using the selector option to get the desired web factor: We can specify the chooser of the web element we need so that it can narrow down the leaning of the returned results.

• Using the container method to access the web element: We can use the container option, the like as the picker, to get the desired web element for the upshot.
• Using an array of elements: We can use thegetAllByText ()method and get an array of web elements that will match our criteria. We can select a specific element by addressing its power and get the coveted outcome.

findbytext () vs. contains () in Cypress

The main difference that can be identify between these two methods is that contains () will return the first constitute web element. In contrast, the findbytext () will go through the test field, and if it finds more than one result for the selected criteria, it will terminate the hunting without returning a result.

How to add the Cypress Testing Library

To use the findbytext () part, we have to install and configure theCypress Testing Librarymodel. To install the framework using the npm, we can use the following codification run through the console.

npm install -- save-dev cypress @ testing-library/cypress

Afterward, we must add the following codification cube inside the cypress/support/command.js file.

import ' @ testing-library/cypress/add-commands '

So with these add, we can start utilise the library and its method inside the exam flows.

How to use the findbytext () in Cypress?

For this example, we & # 8217; ll be using the BrowserStack demo site. (bstackdemo.com)

The undermentioned code block has to be added in a Cypress spec file

/// & lt; citation types= '' Cypress '' / & gt; beforeEach (() = & gt; {cy.visit (`` https: //bstackdemo.com/ '');}) it (`` THE DEMO FOR THE FINDBYTEXT () '', () = & gt; {//Sorting the Samsung phones utilise the `` Samsung '' btn and clicking it. cy.findByText (`` Samsung '') .should (`` be.visible '') .click (); / * -- Commented Out Code Block -- When this code cube run with the above, it will show the error when multiple results are found. TO USE THIS CODE, COMMENT OUT THE BELOW CODE BLOCK AND RUN THE CODE * / // cy.findByText (`` Add to drag '') .should (`` be.visible '') .click (); / * This code block shows how to mitigate the multiple result found subject in a mere way TO USE THIS CODE, COMMENT OUT THE ABOVE CODE BLOCK AND RUN THE CODE * / cy.findAllByText (`` Add to cart '') .then ($ el = & gt; $ el [1]) .click ();});

Conclusion

So the findByText (), along with other Cypress Testing Library components, has created a robust set of tools that have the potential to enhance the whole test suite optimization along with the test flow reusability. It is safe to say that, with this specific library, most of the Cypress used test stream have been optimize for the best of its abilities performance-wise, as well as the clean and easy debugging.

With BrowserStack, QA teams can opt for across leading browser like Chrome, Edge, and Firefox. It ’ s simpleton.

• Install the BrowserStack Cypress CLI to trigger your trial and get updates
• Create a sample JSON file to configure your BrowserStack test runs
• Trigger your tests via CLI, view and debug the results on the Automate dashboard.

Related Guides