From 03f7f18879c19ba5952d6ab8a5ed1b02f317328f Mon Sep 17 00:00:00 2001 From: Gleb Bahmutov Date: Fri, 18 Jan 2019 09:50:23 -0500 Subject: [PATCH 1/4] add more examples for attribute and css after cy.get --- app/commands/querying.html | 33 ++++++++++++++++++- cypress/integration/examples/querying.spec.js | 19 ++++++++++- 2 files changed, 50 insertions(+), 2 deletions(-) diff --git a/app/commands/querying.html b/app/commands/querying.html index 00527342a..feb3ebf55 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 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 attribute
+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..19c00c86d 100644 --- a/cypress/integration/examples/querying.spec.js +++ b/cypress/integration/examples/querying.spec.js @@ -8,7 +8,7 @@ context('Querying', () => { // The most commonly used query is 'cy.get()', you can // think of this like the '$' in jQuery - it('cy.get() - query DOM elements', () => { + it.only('cy.get() - query DOM elements', () => { // https://on.cypress.io/get cy.get('#query-btn').should('contain', 'Button') @@ -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 attribute + 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', () => { From 53f0f953d0fcf0e19571d89776ebde8dbe7c634b Mon Sep 17 00:00:00 2001 From: Gleb Bahmutov Date: Fri, 18 Jan 2019 09:50:36 -0500 Subject: [PATCH 2/4] chore: remove .only --- cypress/integration/examples/querying.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/integration/examples/querying.spec.js b/cypress/integration/examples/querying.spec.js index 19c00c86d..2a5c6d7fe 100644 --- a/cypress/integration/examples/querying.spec.js +++ b/cypress/integration/examples/querying.spec.js @@ -8,7 +8,7 @@ context('Querying', () => { // The most commonly used query is 'cy.get()', you can // think of this like the '$' in jQuery - it.only('cy.get() - query DOM elements', () => { + it('cy.get() - query DOM elements', () => { // https://on.cypress.io/get cy.get('#query-btn').should('contain', 'Button') From 93386c259e1adeb1c7ece1a35c2e56997515e2a0 Mon Sep 17 00:00:00 2001 From: Gleb Bahmutov Date: Fri, 18 Jan 2019 10:05:09 -0500 Subject: [PATCH 3/4] it is CSS property --- app/commands/querying.html | 2 +- cypress/integration/examples/querying.spec.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/commands/querying.html b/app/commands/querying.html index feb3ebf55..a8bfd0e9c 100644 --- a/app/commands/querying.html +++ b/app/commands/querying.html @@ -156,7 +156,7 @@

cy.get()

.invoke('attr', 'data-test-id') .should('equal', 'test-example') -// or you can get element's CSS attribute +// or you can get element's CSS property cy.get('[data-test-id="test-example"]') .invoke('css', 'position') .should('equal', 'static') diff --git a/cypress/integration/examples/querying.spec.js b/cypress/integration/examples/querying.spec.js index 2a5c6d7fe..5fdc5e293 100644 --- a/cypress/integration/examples/querying.spec.js +++ b/cypress/integration/examples/querying.spec.js @@ -27,7 +27,7 @@ context('Querying', () => { .invoke('attr', 'data-test-id') .should('equal', 'test-example') - // or you can get element's CSS attribute + // or you can get element's CSS property cy.get('[data-test-id="test-example"]') .invoke('css', 'position') .should('equal', 'static') From d80310bcaedd004df2b5d1f654a59942c85dfbd3 Mon Sep 17 00:00:00 2001 From: Jennifer Shehane Date: Sat, 19 Jan 2019 00:01:48 +0630 Subject: [PATCH 4/4] Minor updates --- app/commands/querying.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/commands/querying.html b/app/commands/querying.html index a8bfd0e9c..c2164eb46 100644 --- a/app/commands/querying.html +++ b/app/commands/querying.html @@ -150,13 +150,13 @@

cy.get()

- cy.get() yields jQuery object, you can get its attribute by invoking .attr() method. + 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 element's CSS property
+// or you can get an element's CSS property
 cy.get('[data-test-id="test-example"]')
   .invoke('css', 'position')
   .should('equal', 'static')
@@ -166,8 +166,8 @@

cy.get()

- Alternatively, chain assertions directly to the cy.get() call, - see assertions documentation. + 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')