- Cypress Tutorial
- Cypress - Home
- Cypress - Introduction
- Cypress - Architecture and Environment Setup
- Cypress - Test Runner
- Cypress - Build First Test
- Cypress - Supported Browsers
- Cypress - Basic Commands
- Cypress - Variables
- Cypress - Aliases
- Cypress - Locators
- Cypress - Assertions
- Cypress - Text Verification
- Cypress - Asynchronous Behavior
- Cypress - Working with XHR
- Cypress - jQuery
- Cypress - Checkbox
- Cypress - Tabs
- Cypress - Dropdown
- Cypress - Alerts
- Cypress - Child Windows
- Cypress - Hidden Elements
- Cypress - Frames
- Cypress - Web Tables
- Cypress - Mouse Actions
- Cypress - Cookies
- Cypress - Get and Post
- Cypress - File Upload
- Cypress - Data Driven Testing
- Cypress - Prompt Pop-up Window
- Cypress - Dashboards
- Cypress - Screenshots and Videos
- Cypress - Debugging
- Cypress - Custom Commands
- Cypress - Fixtures
- Cypress - Environment Variables
- Cypress - Hooks
- Cypress - Configuration of JSON File
- Cypress - Reports
- Cypress - Plugins
- Cypress - GitHub
- Cypress Useful Resources
- Cypress - Quick Guide
- Cypress - Useful Resources
- Cypress - Discussion
Cypress - jQuery
Cypress can act upon jQuery objects and its methods along with its internal commands.While Cypress uses the get method to identify a web element, JQuery uses the $() method for the same purpose.
In Cypress, the command for identifying a web element is as follows −
cy.get('h1#heading')
Whereas in case of jQuery, the command for identification of a web element is as follows −
$('h1#heading')
Cypress is based on JavaScript which is of asynchronous nature. However, Cypress commands behave synchronously by resolving the Promise internally, which is hidden from the end user.
Nevertheless, when Cypress acts upon jQuery objects and its methods, the Promise logic has to be implemented specifically, to make flow synchronous (with the help of method then).
For instance, while we want to extract the text content of a web element (with jQuery method - text), we require to implement Promise with the then method.
Promise Implementation in jQuery
Following is the command for the Promise Cypress implementation in jQuery −
// test suite describe('Tutorialspoint', function () { // it function to identify test it('Scenario 1', function (){ // test step to launch a URL cy.visit("https://accounts.google.com") // Promise implementation with then() cy.get('h1#headingText').find('span').then(function(e){ //method text to obtain text content const t = e.text() expect(t).to.contains('Sign') }) }) })
In jQuery, an empty collection is returned, if the locator which is provided, does not match with any of the web elements in DOM.
In order to avoid exceptions, it is recommended to verify the length of the jQuery collection yielded by $(). The command for the same is as follows −
const e = $('#txt') if (e.length > 0){ //proceed }
However, in case, there are no matching web elements in DOM, the Cypress automatically goes to the retry mode till the element is available or there is a timeout, as shown below −
cy.get('#txt') .then((e) => { //proceed working on element })
The method yields a Promise. Also, the Promise shall be in resolved mode, only if a web element is matched with the locator. If the Promise is in a reject state, the logic within the then block will never be executed.
We can access jQuery methods in Cypress, with the following expression −
Cypress.$( '#txt'), where #txt is the locator.
Implementation of jQuery methods
Given below is a command for the identification and execution of the test in Cypress with jQuery −
// test suite describe('Tutorialspoint', function () { // it function to identify test it('Scenario 1', function (){ // test step to launch a URL cy.visit("https://accounts.google.com") // access web element with Cypress.$ cy.request('/').get('h1#headingText').then(function(e){ Cypress.$(e).find('span') const t = e.text() cy.log(t) }) }) })
As the above test is executed, if we open the Console (pressing F12), and find for the required web element, with the expression Cypress.$ ('h1#headingText').text(), we can verify our test, as shown below −
The log message – Sign –in is obtained from the cy.log command in Cypress.
To Continue Learning Please Login
Login with Google