diff --git a/app/commands/querying.html b/app/commands/querying.html index 00527342a..c2164eb46 100644 --- a/app/commands/querying.html +++ b/app/commands/querying.html @@ -119,6 +119,7 @@
+ cy.get()
yields a jQuery object, you can get its attribute by invoking the .attr()
method.
+
cy.get('[data-test-id="test-example"]')
+ .invoke('attr', 'data-test-id')
+ .should('equal', 'test-example')
+
+// or you can get an element's CSS property
+cy.get('[data-test-id="test-example"]')
+ .invoke('css', 'position')
+ .should('equal', 'static')
+
+ Alternatively, chain assertions directly to the cy.get()
call.
+ See assertions documentation.
+
cy.get('[data-test-id="test-example"]')
+ .should('have.attr', 'data-test-id', 'test-example')
+ .and('have.css', 'position', 'static')
+ diff --git a/cypress/integration/examples/querying.spec.js b/cypress/integration/examples/querying.spec.js index 508fe91fc..5fdc5e293 100644 --- a/cypress/integration/examples/querying.spec.js +++ b/cypress/integration/examples/querying.spec.js @@ -20,6 +20,23 @@ context('Querying', () => { // Use CSS selectors just like jQuery cy.get('[data-test-id="test-example"]').should('have.class', 'example') + + // 'cy.get()' yields jQuery object, you can get its attribute + // by invoking `.attr()` method + cy.get('[data-test-id="test-example"]') + .invoke('attr', 'data-test-id') + .should('equal', 'test-example') + + // or you can get element's CSS property + cy.get('[data-test-id="test-example"]') + .invoke('css', 'position') + .should('equal', 'static') + + // or use assertions directly during 'cy.get()' + // https://on.cypress.io/assertions + cy.get('[data-test-id="test-example"]') + .should('have.attr', 'data-test-id', 'test-example') + .and('have.css', 'position', 'static') }) it('cy.contains() - query DOM elements with matching content', () => {