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()

// ↲ // Use CSS selectors just like jQuery +
+ -

+
+
+

+ 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')
+
+
+ +

+ +

cy.contains()

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', () => {