feat: more examples of getting attributes (#191)

* add more examples for attribute and css after cy.get * chore: remove .only * it is CSS property * Minor updates
cypress-io · Jan 18, 2019 · 8419a7d · 8419a7d
1 parent feea274
commit 8419a7d
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 1 deletion.
diff --git a/app/commands/querying.html b/app/commands/querying.html
@@ -119,6 +119,7 @@ <h4><a href="https://on.cypress.io/get">cy.get()</a></h4>
 //              ↲
 // Use CSS selectors just like jQuery</code></pre>
           </div>
+
           <div class="col-xs-5">
             <div class="well">
               <button id="query-btn" class="query-btn btn btn-primary">
@@ -144,9 +145,39 @@ <h4><a href="https://on.cypress.io/get">cy.get()</a></h4>
               </div>
             </div>
           </div>
+        </div>
 
-          <div class="col-xs-12"><hr /></div>
+        <div class="row">
+          <div class="col-xs-7">
+            <p>
+              <code>cy.get()</code> yields a jQuery object, you can get its attribute by invoking the <code>.attr()</code> method.
+            </p>
+            <pre><code class="javascript">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')</code></pre>
+          </div>
+        </div>
 
+        <div class="row">
+          <div class="col-xs-7">
+            <p>
+              Alternatively, chain assertions directly to the <code>cy.get()</code> call.
+              See <a href="https://on.cypress.io/assertions" target="_blank">assertions documentation</a>.
+            </p>
+            <pre><code class="javascript">cy.get('[data-test-id="test-example"]')
+  .should('have.attr', 'data-test-id', 'test-example')
+  .and('have.css', 'position', 'static')</code></pre>
+          </div>
+        </div>
+
+        <div class="col-xs-12"><hr /></div>
+
+        <div class="row">
           <div class="col-xs-7">
             <h4><a href="https://on.cypress.io/contains">cy.contains()</a></h4>
             <p>

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