garris/BackstopJS

removeSelectors not working on scenario with click action

smirfolio opened this issue · 7 comments

Hi
I have fun using your lib, thanks a lot,
I'm trying to perform a scenario where i need to test some page after an click action
Scenario :

{ label: 'Click To Page',
    url: 'http://test.site',
    delay: 6000,
    misMatchThreshold: 0.001,
    requireSameDimensions: true,
    referenceUrl: 'http://reference.site',
    clickSelector: '.clickHere',
    removeSelectors: [ '.HideMe1', '#HideMe2', 'footer.HideMe' ] }

..

"onReadyScript": "chromy/onReady.js",
 "engine": "chrome",
..

engine : chrome, chromy
by enabling the debugWindow , i can see that the opened page is proceed properly, but in the clicked page the 'removeSelectors' are style in place
So i have no idea how to solve this issue, i'm pretty sure that i have to implement some extra code on the "chromy/onReady.js", but I am not inspired
Any help will be appreciated

Are you saying the second page removeSelectors does not work?

Yep, that'S what i mean, in addition I managed to perform scenario with multiple clicks :

{ label: 'Click To Page', 
url: 'http://test.site', 
delay: 6000, 
misMatchThreshold: 0.001, 
requireSameDimensions: true,
referenceUrl: 'http://reference.site',
clicksSelectors: 
     [ '.taxo-element > li:nth-child(1) > span > ul:nth-child(1)',
       '.taxo-element > li:nth-child(1) > span > ul:nth-child(2) > li:nth-child(2) > a',
       '.search-browser > .panel-body  ul.nav-pills > li:nth-child(1) > a',
       '.search-browser > .panel-body  a.btn-xs',
       'ul[test-ref=search-counts] > li:nth-child(2) > a',
       'tr:nth-of-type(2) td:nth-of-type(4) a' ],
 onReadyScript: 'helperClickSelectorScript.js' ,
 removeSelectors: [ '.HideMe1', '#HideMe2', 'footer.HideMe' ]}`

and in my helperClickSelectorScript.js i have something like :

 var slectorsClicks = scenario.clicksSelectors
  slectorsClicks.forEach(function(selectorClick){
    chromy
      .sleep(1000)
      .wait(selectorClick)
      .click(selectorClick)
      .sleep(500);
  });

so in a given page i can click multiple button to build a request then go to a new page (Search result)
But i have the same issue with removeSelectors

I see. What you probably want to do is not click but just create a new scenario with a unique URL for each page (state) you want to go to. That is really the intended usage pattern.

Well you're probably right regarding what i try to do with multiple click scenario, but may be the 'clickSelector' basic usage, have to be consistent with other parameters especially the 'removeSelectors', so in my opinion if 'clickSelector' perform a redirect to new page the 'removeSelectors' must take effect, but for now screenshot of new page may contain the 'removeSelectors' elements

The clickSelector feature is a convenience to simulate interactions usually associated with popups or other same-page state changes which are not reflected in window.location.href. If you instantiate a new top level state (via click or other interaction) then everything about the scenario you just left are pretty much out of scope.

@garris
Well, i never give Up ;) , so i I have solved the issue using some of your code that i used on the "onReadyScript": "chromy/onReady.js" :
Once the click actions performed i do some thing like :

if (scenario.hasOwnProperty('removeSelectors')) {
    scenario.removeSelectors.forEach(function (selector) {
      chromy
      .evaluate(`window._backstopSelector = '${selector}'`)
      .evaluate(
        () => {
          Array.prototype.forEach.call(document.querySelectorAll(window._backstopSelector), function (s, j) {
            s.style.display = 'none';
            s.classList.add('__86d');
          });
        }
      );
    });
  }

It may help someone

LOL -- if you really want all features to be available on new pages you can inject this file...
https://github.com/garris/BackstopJS/blob/master/capture/backstopTools.js

see example here...
https://github.com/garris/BackstopJS/blob/master/core/util/runChromy.js#L194