support partial matching text,html,value

[kuceb]

fix #1969

adds the following partial matchers:

// <div id="foo">foo bar baz</div>
cy.get('#foo').should('contain.text', 'foo')
cy.get('#foo').should('not.contain.text', 'baz foo')

cy.get('#foo').should('contain.html', '<div')
cy.get('#foo').should('not.contain.html', 'fizzbuzz')

// <input value="foobarbaz">
cy.get('#foo').should('contain.value', 'foo')
cy.get('#foo').should('not.contain.value', 'baz foo')

expect(el).to.contain.value('foo') // works too

• tests
• waiting for add "be.focused" and "have.focus" to assertions #3219 to be merged
• type definitions

[jennifer-shehane]

Hmm, is this a bugfix? breaking change? feature? 🤔

Seems this could break some peoples expected implementation today.

Does this also close this issue? #3887

[kuceb]

I have the issue tagged as 3.4.0 feature release.

[reallyusefulengine]

Given an element like this:

<button type="button" class="⚛️ flex-grow-1 flex-lg-grow-0 btn btn-danger" id="CANCEL" data-survey-action="cancel" data-url="">
    Cancel form
  </button>

I have to do something ugly like this:

cy.get('#CANCEL').should('have.text', '\n Cancel form\n ').and('have.class', 'btn-danger');

or some convoluted way like this:

cy.get('#CANCEL').then((exp) => {
                const text = exp[0].textContent.trim();
                expect(text).to.equal('Cancel form');
            });

Would be great if there was an easy way to strip new lines and leading and trailing white spaces

[jennifer-shehane]

@reallyusefulengine This shouldn't be necessary in 3.4.0 of Cypress. What version are you using?

[reallyusefulengine]

Im using 3.4.0

when I run:

cy.get('#CANCEL').should('have.text', 'Cancel form').and('have.class', 'btn-danger');

[kuceb]

@reallyusefulengine use contain.text instead of have.text

[reallyusefulengine]

Ok thanks @bkucera for the comment. The problem i have with contain.text is that if a developer updates the text of a button from "Submit" to "Submit Now" the test will still pass as it contains Submit. Thats why I was using have.text.

To illustrate what I mean I created a custom function that basically does what I want:

Cypress.Commands.add(
    'hasText',
    {
        prevSubject: true,
    },
    function(subject, expectedText) {
        const text = subject[0].textContent.trim();
        expect(text).to.equal(expectedText);
    }
);

Not sure if doing that is good practice though

[jennifer-shehane]

@reallyusefulengine Custom commands are encouraged! It's the best way to get the right fit for your project and looks like a good solution. 👍

[minbarnett]

am I the only who still sees this old issue reported here #1969 on cypress version 6.4.0

[jennifer-shehane]

@minbarnett Please open a new issue with a reproducible example if you're seeing a bug in 6.4.0.