Application does not behave as expected in cypress runner. Same works on browser when manually done (outside of cypress).

mkathu commented 2 years ago

Current behavior

I am trying to work with cypress on url : https://www.clearhaircare.com/arabia/en/products/type/Shampoo.html

once the page is loaded i am trying to interact with drop down. Based on the values selected in the dropdown the results are displayed.

This works as expected when tried manually on chrome browser. But in cypress it does not show any result on selecting the values in the dropdown.

manually:

Cypress runner:

Desired behavior

Ideally the script should perform the following:

Open page
Interact with filters defined in fixtures
Once the results are filtered, capture the screenshot and push percy

Note: There is no failure in the script. Its just that the results are not updated on the page on applying filters in cypress runner. The same works fine when done manually outside cypress runner.

Test code to reproduce

Fixture:

{
    "site": "clearhaircare_ar_en",
    "requestintercept": "**/sprites/cross-search-overlay.svg",
    "url": "https://www.clearhaircare.com/arabia/en/products/type/Shampoo.html",
    "cookielocator": "onetrust-accept-btn-handler",
    "filters":[
        {
            "locator":"*[name='listing-filter-0']",
            "value":"clear^product^type^shampoo",
            "url": "shampoo"
        },
        {
            "locator":"*[name='listing-filter-1']",
            "value":"clear^product^needs^damaged",
            "url": "damaged"
        },
        {
            "locator":"*[name='listing-filter-2']",
            "value":"clear^product^collection^men",
            "url": "men"
        }
    ]
}

Code snippet.

describe("Filter prodcuts suite for clearhaircare ar en",function(){
    before(() => {
        // Block newrelic js outright due to issues with Cypress networking code.
        cy.log("Blocking NewRelic scripts");
        //Will block 
        //  https://js-agent.newrelic.com/nr-spa-1208.js
        cy.intercept(/\.*newrelic.*$/, (req) => {
            console.log("NEW RELIC INTERCEPTED");
            req.reply("console.log('Fake New Relic script loaded');");
        });
    });

    beforeEach(function () {
        cy.fixture("/clearhaircare_ar_en/prod-site/filter").then((data) => {
            this.testdata = data
        })
    })

    it("Filter prodcuts test for clearhaircare_ar_en", function () {
        cy.intercept('GET',this.testdata.requestintercept).as('call')
        cy.visit(this.testdata.url).wait('@call')
        for (var i = 0; i < this.testdata.filters.length; i++) {
            cy.get(this.testdata.filters[i].locator).select(this.testdata.filters[i].value).should('have.value',this.testdata.filters[i].value)
            cy.url().should('contain',this.testdata.filters[i].url)
        }
        cy.log("snapshot: " + this.testdata.site+"_filter_"+ i)
    })
})

package.json:

  "dependencies": {
    "cypress": "^9.5.2",
    "cypress-real-events": "^1.6.0",
    "scroll-to-bottomjs": "^1.1.0"
  },
  "devDependencies": {
    "@percy/cli": "^1.0.0-beta.68",
    "@percy/cypress": "^3.1.1",
    "cypress-iframe": "^1.0.1",
    "cypress-pipe": "^2.0.0",
    "cypress-wait-until": "^1.7.2",
    "mochawesome": "^7.1.0",
    "mochawesome-merge": "^4.2.1",
    "mochawesome-report-generator": "^6.1.0"
  }

Cypress Version

9.5.2

Other

No response

emilyrohrbough commented 2 years ago

@mkathu This doesn't appear to be an issue when I run your example. There are quite a few errors going on & I had to bypass an error within your site, but running this correctly selects the options.

describe('Filter prodcuts suite for clearhaircare ar en', function () {
  before(() => {
    // Block newrelic js outright due to issues with Cypress networking code.
    cy.log('Blocking NewRelic scripts')
    //Will block
    //  https://js-agent.newrelic.com/nr-spa-1208.js
    cy.intercept(/\.*newrelic.*$/, (req) => {
      console.log('NEW RELIC INTERCEPTED')
      req.reply('console.log(\'Fake New Relic script loaded\');')
    })
  })

  beforeEach(function () {
    cy.fixture('/issue').then((data) => {
      this.testdata = data
    })
  })

  it('Filter prodcuts test for clearhaircare_ar_en', function () {
    cy.on('uncaught:exception', () => {
     // seeing
     // (uncaught exception)
     // Error: Script error. Cypress detected that an uncaught error was thrown from a cross origin script. We cannot provide      
     //  you the stack trace, line number, or file where this error occurred. Check your Developer Tools Console for the actual      
     // error - it should be printed there. It's possible to enable debugging these scripts by adding the crossorigin attribute and 
     // setting a CORS header.
      return false
    })

    // cy.intercept('GET', this.testdata.requestintercept).as('call')
    cy.visit(this.testdata.url)
    // .wait('@call')
    for (var i = 0; i < this.testdata.filters.length; i++) {
      cy.get(this.testdata.filters[i].locator).select(this.testdata.filters[i].value).should('have.value', this.testdata.filters[i].value)
    //   cy.url().should('contain', this.testdata.filters[i].url)
    }
    cy.log(`snapshot: ${ this.testdata.site }_filter_${ i}`)
  })
})

mkathu commented 2 years ago

No its not that the drop downs or filters are not selectable in cypress. It is the result which needs to be displayed once filters are applied. This works manually on browsers but no results are displayed in cypress.

mkathu commented 2 years ago

@mkathu This doesn't appear to be an issue when I run your example. There are quite a few errors going on & I had to bypass an error within your site, but running this correctly selects the options.

describe('Filter prodcuts suite for clearhaircare ar en', function () {
  before(() => {
    // Block newrelic js outright due to issues with Cypress networking code.
    cy.log('Blocking NewRelic scripts')
    //Will block
    //  https://js-agent.newrelic.com/nr-spa-1208.js
    cy.intercept(/\.*newrelic.*$/, (req) => {
      console.log('NEW RELIC INTERCEPTED')
      req.reply('console.log(\'Fake New Relic script loaded\');')
    })
  })

  beforeEach(function () {
    cy.fixture('/issue').then((data) => {
      this.testdata = data
    })
  })

  it('Filter prodcuts test for clearhaircare_ar_en', function () {
    cy.on('uncaught:exception', () => {
     // seeing
     // (uncaught exception)
     // Error: Script error. Cypress detected that an uncaught error was thrown from a cross origin script. We cannot provide      
     //  you the stack trace, line number, or file where this error occurred. Check your Developer Tools Console for the actual      
     // error - it should be printed there. It's possible to enable debugging these scripts by adding the crossorigin attribute and 
     // setting a CORS header.
      return false
    })

    // cy.intercept('GET', this.testdata.requestintercept).as('call')
    cy.visit(this.testdata.url)
    // .wait('@call')
    for (var i = 0; i < this.testdata.filters.length; i++) {
      cy.get(this.testdata.filters[i].locator).select(this.testdata.filters[i].value).should('have.value', this.testdata.filters[i].value)
    //   cy.url().should('contain', this.testdata.filters[i].url)
    }
    cy.log(`snapshot: ${ this.testdata.site }_filter_${ i}`)
  })
})

@emilyrohrbough i will try this script which you have shared and update my findings.

emilyrohrbough commented 2 years ago

@mkathu Can you share a generalized snipped of the callback that should be triggered when the option is selected?

mkathu commented 2 years ago

@mkathu Can you share a generalized snipped of the callback that should be triggered when the option is selected?

Once drop-down values are selected all that is being done is capture screenshot

mkathu commented 2 years ago

@emilyrohrbough , I tried to observe the network logs and found that on selecting a value from a drop down, request is made.

Example: On selecting Type drop down as "shampoo" and selecting need dropdown as "damaged" below api call is made which fetches the response in json format.

https://www.clearhaircare.com/arabia/en/products/type/Shampoo/_jcr_content/flexi_hero_par/productlistingv2.data.json?fl=clear^product^type^shampoo&fl=clear^product^needs^damaged&pn=1

On chrome manually:

Same thing when done in Cypress runner:

Looks like this request is not going through in cypress.

Hence, zero results is seen on screen.

Not sure of the cause of this behavior.

mkathu commented 2 years ago

Any update on this?

emilyrohrbough commented 2 years ago

@mkathu I am not actively looking into this issue. Sorry 😞

github-actions[bot] commented 1 year ago

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

cypress-app-bot commented 1 year ago

This issue has been closed due to inactivity.

umashankar-pm commented 4 months ago

Any update on this?

did you find a solution or fix for this?

cypress-io / cypress