Cypress: no information about test error source/location

[hlb-schmidt]

i have to do many clicks to rig and test a feature, and when cypress fails to click, i get the following error:

  1) whatever:
     CypressError: cy.click() can only be called on a single element. Your subject contained 3 elements. Pass { multiple: true } if you want to serially click each element.
      at Object.cypressErr (https://shopware.vanilla/__cypress/runner/cypress_runner.js:68076:11)
      at Object.throwErr (https://shopware.vanilla/__cypress/runner/cypress_runner.js:68041:18)
      at Object.throwErrByPath (https://shopware.vanilla/__cypress/runner/cypress_runner.js:68068:17)
      at Context.click (https://shopware.vanilla/__cypress/runner/cypress_runner.js:54585:16)
      at Context.<anonymous> (https://shopware.vanilla/__cypress/runner/cypress_runner.js:63943:21)
      at https://shopware.vanilla/__cypress/runner/cypress_runner.js:63656:33
      at tryCatcher (https://shopware.vanilla/__cypress/runner/cypress_runner.js:7091:23)
      at Promise._settlePromiseFromHandler (https://shopware.vanilla/__cypress/runner/cypress_runner.js:5113:31)
      at Promise._settlePromise (https://shopware.vanilla/__cypress/runner/cypress_runner.js:5170:18)
      at Promise._settlePromiseCtx (https://shopware.vanilla/__cypress/runner/cypress_runner.js:5207:10)
      at Async._drainQueue (https://shopware.vanilla/__cypress/runner/cypress_runner.js:2028:12)
      at Async._drainQueues (https://shopware.vanilla/__cypress/runner/cypress_runner.js:2033:10)
      at Async.drainQueues (https://shopware.vanilla/__cypress/runner/cypress_runner.js:1907:14)
      at <anonymous>

how do i know which of the cy.click() cypress has a problem?
at the moment i do it by trial-and-error, but that cant be the way...
why not simply show the test file name and line number in the error?

$ ./node_modules/.bin/cypress --version
Cypress package version: 3.0.2
Cypress binary version: 3.0.2

[jennifer-shehane]

I would suggest attempting to split up the commands acrossits so that you can better narrow down the issue for now. And if it is deeply nested, then nest your clicks, something like (is in coffeescript, but just conveying concept):

  describe "header", ->
    beforeEach ->
      cy.get(".navbar").click("span")

    it "displays heading", ->
      cy.get("h3").should("contain", "new heading")

    describe "sub heading", ->
      beforeEach ->
        cy.get(".other-nav").click("span")

      it "displays sub-heading", ->
        cy.get("h4").should("contain", "other heading")

This way the exact click that failed would have an associated test name.

Although, I do think this error message should be improved by Cypress to include the original subject that was passed in to be clicked, so that it would be easier to narrow down, so will leave issue open to improve that.

To do

• [ ] Update when throwing error to pass subject as arg: https://github.com/cypress-io/cypress/blob/develop/packages/driver/src/cy/commands/actions/click.coffee#L38
• [ ] Update the error message to print the subject: https://github.com/cypress-io/cypress/blob/develop/packages/driver/src/cypress/error_messages.coffee#L121
• [ ] Update test to ensure subject is printed in error message : https://github.com/cypress-io/cypress/blob/develop/packages/driver/test/cypress/integration/commands/actions/click_spec.coffee#L1073

[hlb-schmidt]

and why not simply show the error filename and line number?

[hlb-schmidt]

FWIW, heres my (now working first cypress) test, and i find it very readable (except for those crucial regexps for slobby html). and i cant see how adding more lines with (useless) describes and/or its would be more helpful than a simple error filename and line number...

describe("listing page", function() {
    it("seo filters work", function() {
        cy.visit("/clothing/")

        // select filters
        cy.contains(/^\s*Filter\s*$/).click()

        cy.contains(/^\s*Material\s*$/).click()
        cy.contains(/^\s*Cotton\s*$/).click()
        cy.contains(/^\s*Leather\s*$/).click()
        cy.contains(/^\s*Material\s*$/).click()

        cy.contains(/^\s*Size\s*$/).click()
        cy.contains(/^\s*XL\s*$/).click()
        cy.contains(/^\s*L\s*$/).click()
        cy.contains(/^\s*M\s*$/).click()
        cy.contains(/^\s*S\s*$/).click()
        cy.contains(/^\s*Size\s*$/).click()

        cy.contains(/^\s*Immediately available\s*$/).click()
        cy.contains(/^\s*Shipping free\s*$/).click()

        cy.contains(/^\s*Manufacturer\s*$/).click()
        cy.contains(/^\s*Shopware Fashion\s*$/).click()
        cy.contains(/^\s*Manufacturer\s*$/).click()

        cy.contains(/^\s*Product types\s*$/).click()
        cy.contains(/^\s*Highlighted\s*$/).click()
        cy.contains(/^\s*Product types\s*$/).click()

        // assert selection
        cy.get(".filter--active").contains(/^\s*Cotton\s*$/)
        cy.get(".filter--active").contains(/^\s*Leather\s*$/)
        cy.get(".filter--active").contains(/^\s*XL\s*$/)
        cy.get(".filter--active").contains(/^\s*L\s*$/)
        cy.get(".filter--active").contains(/^\s*M\s*$/)
        cy.get(".filter--active").contains(/^\s*S\s*$/)
        cy.get(".filter--active").contains(/^\s*Immediately available\s*$/)
        cy.get(".filter--active").contains(/^\s*Shipping free\s*$/)
        cy.get(".filter--active").contains(/^\s*Shopware Fashion\s*$/)
        cy.get(".filter--active").contains(/^\s*Highlighted\s*$/)
        cy.get(".filter--count").last().contains(/^\s*1\s*$/).as("filterSubmitButton")

        // assert filtered page
        cy.get("@filterSubmitButton").click()
        cy.get(".filter--active").contains(/^\s*Cotton\s*$/)
        cy.get(".filter--active").contains(/^\s*Leather\s*$/)
        cy.get(".filter--active").contains(/^\s*XL\s*$/)
        cy.get(".filter--active").contains(/^\s*L\s*$/)
        cy.get(".filter--active").contains(/^\s*M\s*$/)
        cy.get(".filter--active").contains(/^\s*S\s*$/)
        cy.get(".filter--active").contains(/^\s*Immediately available\s*$/)
        cy.get(".filter--active").contains(/^\s*Shipping free\s*$/)
        cy.get(".filter--active").contains(/^\s*Shopware Fashion\s*$/)
        cy.get(".filter--active").contains(/^\s*Highlighted\s*$/)
        cy.get(".listing > *").should("have.length", 1)
        cy.location("pathname").should((x) => {
            expect(decodeURIComponent(x)).to.eq("/clothing/hersteller-shopware fashion,leather-cotton,foo-large-m-s-xl-bar,versandkostenfrei")
        })
        cy.location("search").should((x) => {
            expect(decodeURIComponent(x)).to.eq("?p=1&o=1&n=12&delivery=1&f=27")
        })
    })
})

ps. is there a selector/assert/thing for "html element with this text content exactly, but ignore leading/trailing whitespace, including tabs and newlines"?

[jennifer-shehane]

I'm not sure of the amount of work involved for this request, but it does seem like a reasonable request.

• [ ] Show the filename of failed test on error output
• [ ] Show the line number of failed test on error output

There's an issue open for stripping newlines of contains here: https://github.com/cypress-io/cypress/issues/92

[elimydlarz]

I'd really like to see this feature. User journey tests (the kind of thing people will absolutely use Cypress for) are often long for a variety of reasons and not having a line reference for a failure is a huge problem.

[nattius]

I'd really like to see this implemented for quicker debugging.

[jennifer-shehane]

Closing as duplicate of this feature: https://github.com/cypress-io/cypress/issues/4858 which actually has required a LOT of work already to get it working.

Related issue of showing code and line numbers only on failure.https://github.com/cypress-io/cypress/issues/3762