From 8419a7d57fe8a5a2c8491105ceff0477aac54c03 Mon Sep 17 00:00:00 2001
From: Gleb Bahmutov <gleb.bahmutov@gmail.com>
Date: Fri, 18 Jan 2019 12:49:31 -0500
Subject: [PATCH] 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
---
 app/commands/querying.html                    | 33 ++++++++++++++++++-
 cypress/integration/examples/querying.spec.js | 17 ++++++++++
 2 files changed, 49 insertions(+), 1 deletion(-)

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