contain.text and include.text should do substring matches but instead do full-string matches

Current behavior:

    // cy.get('div#preview').should('have.text', 'Hello');     // this is a full match, but we want a partial match, to ignore newlines etc.
    // cy.get('div#preview').should('contain.text', 'Hello');  // bug: this does the same as have.text
    // cy.get('div#preview').should('include.text', 'Hello');  // bug: this also does the same as have.text
    cy.get('div#preview').then((el)=> {
      assert.include(el.text(), 'Hello');  // this works but it isn't pretty
    });

the log for all three of the above says:

ASSERT: expected <div#preview> to have text Hello, but the text was Hello\n

which makes me think that there might be some aliasing going on since I’d think the error messages for “include” and “contain” would say “include” and “contain”, not "have

Desired behavior:

• have.text should test whether the element’s full text is equal to the given string
• contain.text and include.text should test whether the element’s text contains the given string but is not necessarily equal to it

This follows the Chai docs here: http://www.chaijs.com/api/bdd/#method_include “When the target is a string, .include asserts that the given string val is a substring of the target.”

Steps to reproduce:

• Clone this repo (branch name solution): https://github.com/BurlingtonCodeAcademy/markdown_preview/tree/solution
• Run npm install
• Run npx cypress open
• Uncomment lines in cypress/integration/simple_spec.js and check the cypress log

Versions

• Cypress 3.0.1
• MacOS High Sierra
• Google Chrome / Chromium as installed by npm

[bahmutov]

Ok, here is example - either explicit or using regular expression

// validates text using OR
cy.get('.assertions-p').should(($el) => {
  const text = $el.text()

    const hasThisText = text.includes('unknown')
  const hasThatText = text.includes('even more text')

    expect(hasThisText || hasThatText,
    'element has either this or that string').to.be.true
})
// same check is better expressed using a regular expression and
// https://on.cypress.io/contains
cy.contains('.assertions-p', /unknown|even more text/)

[brian-mann]

The reason this isn’t working is because the subject / target is a DOM element, not a string.

I’m not sure this is actually a bug, since we vendor in chai (it does what it does), but we did write our own chai assertions for DOM elements here: https://github.com/cypress-io/cypress/blob/develop/packages/driver/src/cypress/chai_jquery.coffee

I would start diving into what contain.text and include.text actually trigger - whether its chai methods or the chai jquery stuff we wrote to understand it better.

All of this works though you just have to drill into and change the subject to be a string:

cy.wrap('foobar').should('contain', 'foo') // passes
cy.wrap('foobar').should('include', 'foo') // passes

cy.get('button').invoke('text').should('contain', 'foo') // passes
cy.get('button').invoke('text').should('include', 'foo') // passes

If you’d like to do the legwork to see what assertion is being applied to a DOM element that would be great.