From ef03ab26ab0911b6b1a94c02a744f194293d2e10 Mon Sep 17 00:00:00 2001 From: Gleb Bahmutov Date: Wed, 9 Jan 2019 20:30:42 -0500 Subject: [PATCH] feat: add more examples for text matching (#181) * add more examples for text matching * add links to FAQ answer about text content * fix formatting --- .vscode/settings.json | 3 +- app/commands/assertions.html | 441 +++++++++++------- .../integration/examples/assertions.spec.js | 80 +++- 3 files changed, 318 insertions(+), 206 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 9f52c0762..fe3f75151 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,5 +1,6 @@ { "standard.enable": false, "eslint.enable": true, - "typescript.surveys.enabled": false + "typescript.surveys.enabled": false, + "editor.formatOnSave": false } diff --git a/app/commands/assertions.html b/app/commands/assertions.html index 0cf129c3c..8ab118eea 100644 --- a/app/commands/assertions.html +++ b/app/commands/assertions.html @@ -1,180 +1,257 @@ - - - - - - - - Cypress.io: Kitchen Sink - - - - - - - - - - - -
-
-
- -
-

Implicit Assertions

-
-
+
+
+
+
+

Implicit Assertions

+
+
-
-

.should()

-

To make an assertion about the current subject, use the .should() command.

- 
cy.get('.assertion-table')
-  .find('tbody tr:last').should('have.class', 'success')
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - -
#Column headingColumn heading
1Column contentColumn content
2Column contentColumn content
3Column contentColumn content
+
+

.should()

+

+ To make an assertion about the current subject, use the + .should() + command. +

+ 
cy.get('.assertion-table')
+  .find('tbody tr:last').should('have.class', 'success')
+  .find('td')
+  .first()
+  // checking the text of the  element in various ways
+  .should('have.text', 'Column content')
+  .should('contain', 'Column content')
+  .should('have.html', 'Column content')
+  // chai-jquery uses "is()" to check if element matches selector
+  .should('match', 'td')
+  // to match text content against a regular expression
+  // first need to invoke jQuery method text()
+  // and then match using regular expression
+  .invoke('text')
+  .should('match', /column content/i)
+
+// a better way to check element's text content against a regular expression
+// is to use "cy.contains"
+// https://on.cypress.io/contains
+cy.get('.assertion-table')
+  .find('tbody tr:last')
+  // finds first  element with text content matching regular expression
+  .contains('td', /column content/i)
+  .should('be.visible')
+ +

Note: find even more examples of matching element's text content in this + FAQ answer. +

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
#Column headingColumn heading
1Column contentColumn content
2Column contentColumn content
3Column contentColumn content
+
-
-
+
-
-

.and()

-

To chain multiple assertions together, use the .and() command.

- 
cy.get('.assertions-link')
+          

+            
.and()

+            

+              To chain multiple assertions together, use the
+              .and()
+              command.
+            

+            
cy.get('.assertions-link')
   .should('have.class', 'active')
   .and('have.attr', 'href')
   .and('include', 'cypress.io')

-        

-        

-          

-            Cypress Docs
           

-        

+          

+            

+              Cypress Docs
+            

+          

 
-        

+          

 
-        

-          
Explicit Assertions

-          

-        

+          

+            
Explicit Assertions

+            

+          

 
-        

-          
expect

-          
To make a BDD assertion about a specified subject, use expect.

-        

+          

+            
expect

+            

+              To make a BDD assertion about a specified subject, use
+              expect.
+            

+          

 
-        

-          
expect(true).to.be.true
+          

+            
expect(true).to.be.true
 const o = { foo: 'bar' }
 expect(o).to.equal(o)
-expect(o).to.deep.equal({ foo: 'bar' })

-        

+expect(o).to.deep.equal({ foo: 'bar' })
+// matching text using regular expression
+expect('FooBar').to.match(/bar$/i)

+          

 
-        

+          

 
-        

-          
assert

-          
To make a TDD assertion about a specified subject, use assert.

-          
const person = {
+          

+            
assert

+            

+              To make a TDD assertion about a specified subject, use
+              assert.
+            

+            
const person = {
   name: 'Joe',
   age: 20,
 }
 assert.isObject(person, 'value is object')

-        

+          

 
-        

+          

 
-        

-          
Should with callback function

-          

-        

+          

+            
Should with callback function

+            

+          

 
-        

-          
You can write your own complicated checks using .should(cb) function if included assertions are not enough.
-            Pass a function to should() with any number of explicit assertions within it.
-            The callback function will be retried until it passes all your explicit assertions or times out.

-        

+          

+            

+              You can write your own complicated checks using
+              .should(cb) function if included assertions are not
+              enough. Pass a function to should() with any number
+              of explicit assertions within it. The callback function will be
+              retried until it passes all your explicit assertions or times out.
+            

+          

 
-        

-          
cy.get('.assertions-p').find('p')
+          

+            
cy.get('.assertions-p').find('p')
   .should(($p) => {
     // return an array of texts from all of the p's
     let texts = $p.map((i, el) => // https://on.cypress.io/$
@@ -194,23 +271,23 @@ 
Should with callback function

       'And even more text from third p',
     ])
   })

-        

-        

-          

-            

-              
Some text from first p

-              
More text from second p

-              
And even more text from third p

+          

+          

+            

+              

+                
Some text from first p

+                
More text from second p

+                
And even more text from third p

+              

             

           

-        

 
-        

-          
Assert that element's class includes heading-.

-        

+          

+            
Assert that element's class includes heading-.

+          

 
-        

-          
cy.get('.docs-header').find('div')
+          

+            
cy.get('.docs-header').find('div')
   // .should(cb) callback function will be retried
   .should(($div) => {
     expect($div).to.have.length(1)
@@ -224,22 +301,26 @@ 
Should with callback function

   .then(($div) => {
     expect($div).to.have.text('Introduction')
   })

-        

+          

 
-        

-          

-            

-              
Introduction

+          

+            

+              

+                
Introduction

+              

             

           

-        

 
-        

-          
You can throw any error from the callback function. The callback will be retried, but the assertions will not be shown as nicely in the Command Log UI as Chai assertions.

-        

+          

+            

+              You can throw any error from the callback function. The callback
+              will be retried, but the assertions will not be shown as nicely in
+              the Command Log UI as Chai assertions.
+            

+          

 
-        

-          
cy.get('.docs-header').find('div')
+          

+            
cy.get('.docs-header').find('div')
   .should(($div) => {
     if ($div.length !== 1) {
       // you can throw your own errors
@@ -252,16 +333,16 @@ 
Should with callback function

       throw new Error(`Could not find class "heading-" in ${className}`)
     }
   })

-        

+          

 
-        

+          

+        

       

     

-  

 
-  
-  
-  
-  
-
+    
+    
+    
+    
+  
 
diff --git a/cypress/integration/examples/assertions.spec.js b/cypress/integration/examples/assertions.spec.js
index 99c405ed9..3854bc4b0 100644
--- a/cypress/integration/examples/assertions.spec.js
+++ b/cypress/integration/examples/assertions.spec.js
@@ -6,11 +6,36 @@ context('Assertions', () => {
   })
 
   describe('Implicit Assertions', () => {
-
     it('.should() - make an assertion about the current subject', () => {
       // https://on.cypress.io/should
       cy.get('.assertion-table')
-        .find('tbody tr:last').should('have.class', 'success')
+        .find('tbody tr:last')
+        .should('have.class', 'success')
+        .find('td')
+        .first()
+        // checking the text of the  element in various ways
+        .should('have.text', 'Column content')
+        .should('contain', 'Column content')
+        .should('have.html', 'Column content')
+        // chai-jquery uses "is()" to check if element matches selector
+        .should('match', 'td')
+        // to match text content against a regular expression
+        // first need to invoke jQuery method text()
+        // and then match using regular expression
+        .invoke('text')
+        .should('match', /column content/i)
+
+      // a better way to check element's text content against a regular expression
+      // is to use "cy.contains"
+      // https://on.cypress.io/contains
+      cy.get('.assertion-table')
+        .find('tbody tr:last')
+        // finds first  element with text content matching regular expression
+        .contains('td', /column content/i)
+        .should('be.visible')
+
+      // for more information about asserting element's text
+      // see https://on.cypress.io/using-cypress-faq#How-do-I-get-an-element’s-text-contents
     })
 
     it('.and() - chain multiple assertions together', () => {
@@ -30,6 +55,8 @@ context('Assertions', () => {
       const o = { foo: 'bar' }
       expect(o).to.equal(o)
       expect(o).to.deep.equal({ foo: 'bar' })
+      // matching text using regular expression
+      expect('FooBar').to.match(/bar$/i)
     })
 
     it('pass your own callback function to should()', () => {
@@ -37,31 +64,33 @@ context('Assertions', () => {
       // of explicit assertions within it.
       // The ".should(cb)" function will be retried
       // automatically until it passes all your explicit assertions or times out.
-      cy.get('.assertions-p').find('p')
-      .should(($p) => {
-        // return an array of texts from all of the p's
-        // @ts-ignore TS6133 unused variable
-        const texts = $p.map((i, el) => // https://on.cypress.io/$
-          Cypress.$(el).text())
-
-        // jquery map returns jquery object
-        // and .get() convert this to simple array
-        const paragraphs = texts.get()
-
-        // array should have length of 3
-        expect(paragraphs).to.have.length(3)
-
-        // set this specific subject
-        expect(paragraphs).to.deep.eq([
-          'Some text from first p',
-          'More text from second p',
-          'And even more text from third p',
-        ])
-      })
+      cy.get('.assertions-p')
+        .find('p')
+        .should(($p) => {
+          // https://on.cypress.io/$
+          // return an array of texts from all of the p's
+          // @ts-ignore TS6133 unused variable
+          const texts = $p.map((i, el) => Cypress.$(el).text())
+
+          // jquery map returns jquery object
+          // and .get() convert this to simple array
+          const paragraphs = texts.get()
+
+          // array should have length of 3
+          expect(paragraphs).to.have.length(3)
+
+          // set this specific subject
+          expect(paragraphs).to.deep.eq([
+            'Some text from first p',
+            'More text from second p',
+            'And even more text from third p',
+          ])
+        })
     })
 
     it('finds element by class name regex', () => {
-      cy.get('.docs-header').find('div')
+      cy.get('.docs-header')
+        .find('div')
         // .should(cb) callback function will be retried
         .should(($div) => {
           expect($div).to.have.length(1)
@@ -78,7 +107,8 @@ context('Assertions', () => {
     })
 
     it('can throw any error', () => {
-      cy.get('.docs-header').find('div')
+      cy.get('.docs-header')
+        .find('div')
         .should(($div) => {
           if ($div.length !== 1) {
             // you can throw your own errors