garris / BackstopJS

Catch CSS curve balls.
http://backstopjs.org
MIT License
6.78k stars 603 forks source link

Casper JS click fails screencapture #285

Open stevenbriscoeca opened 8 years ago

stevenbriscoeca commented 8 years ago

Hello,

My casper script is a simple click and it causes the screen capture to mess up.

Here is my JSON file (you can test it yourself)

{
  "viewports": [
    {
      "name": "tablet_h",
      "width": 1024,
      "height": 768
    }
  ],
  "scenarios": [
    {
      "label": "Tous les boutons",
      "url": "http://s.codepen.io/stephendesjardins/debug/BLLPmK",
      "referenceUrl": "http://s.codepen.io/stephendesjardins/debug/BLLPmK",
      "selectors": [
        "#boutons"
      ],
      "misMatchThreshold" : 1
    },
    {
      "label": "Bouton divisé",
      "url": "http://s.codepen.io/stephendesjardins/debug/BLLPmK",
      "referenceUrl": "http://s.codepen.io/stephendesjardins/debug/BLLPmK",
      "selectors": [
        ".dropdown-divise"
      ],
      "misMatchThreshold" : 1,
      "onReadyScript": "button-interaction.js"
    }
  ],
  "paths": {
    "bitmaps_reference": "../../backstop_data/bitmaps_reference",
    "bitmaps_test": "../../backstop_data/bitmaps_test",
    "compare_data": "../../backstop_data/bitmaps_test/compare.json",
    "casper_scripts": "../../backstop_data/casper_scripts"
  },
  "engine": "phantomjs",
  "report": ["browser", "CLI"],
  "debug": false,
  "port": 3001
}

Casper script :

module.exports = function(casper, scenario, vp) {
    casper.click('.dropdown-divise .dropdown-toggle');
    casper.wait(250);
}

Codepen I am using for my test in the json file : http://codepen.io/stephendesjardins/pen/BLLPmK?editors=1000 http://s.codepen.io/stephendesjardins/debug/BLLPmK

Thanks

stevenbriscoeca commented 8 years ago

@garris did you have a chance to look at this?

Thanks!

garris commented 8 years ago

Not sure what "mess up" means in this context. Could you please add detail.

garris commented 8 years ago

Also FYI, you don't need to add referenceUrl if it is the same as url.

stevenbriscoeca commented 8 years ago

Thanks for the replies @garris. I will give you more details soonish! I appreciate it

Oh okay for the referenceUrl, good to know, thank you! :)

stevenbriscoeca commented 8 years ago

Hey @garris ,

backstop_test.zip

You can test with this zip.

If you do :

backstop reference

This is what you get : prod_test_bouton_divis_0_dropdown-divise_0_phone prod_test_bouton_divis_0_dropdown-divise_1_tablet_v prod_test_bouton_divis_0_dropdown-divise_2_tablet_h

Then comment line 2 and 3 of the onReady.js, this is what you get

prod_test_bouton_divis_0_dropdown-divise_0_phone prod_test_bouton_divis_0_dropdown-divise_1_tablet_v prod_test_bouton_divis_0_dropdown-divise_2_tablet_h

I hope this helps, let me know if you need additional info

stevenbriscoeca commented 7 years ago

@garris any update on this...? It still doesn't work for me

thibaut-algrin commented 7 years ago

I have the same problem in my project. I noticed that BackstopJS was running the action twice. Have you any idea?

garris commented 7 years ago

Sorry guys. I am completely maxed with a giant project -- may not be able to reply for a long while. I encourage you guys to dig deeper into what the issue may be. Sorry I can't be more help at the moment. Best, garris

stevenbriscoeca commented 7 years ago

@garris Thank you for the heads up! Because this is open source, I really don't take your help for granted. I hope there could be a paid version with dedicated support one day!

stevenbriscoeca commented 7 years ago

Update : this seems fixed in the latest version of backstop : 2.7.5 bitmoji @garris did you do anything to fix this? I checked the changelog and could not see anything mentionning fixing this

garris commented 7 years ago

Hi -- thanks for letting me know! Very glad it's working for you. I am not sure there was any fix that I made which would have fixed this. I have not been great about documenting everything always apologies for that!

There is a lot of work happening at the moment however. I am integrating chrome-headless into backstop. And also enabling parallel screen capture. These two changes are making the whole experience much faster and way more stable!

stevenbriscoeca commented 7 years ago

@garris you do all this for free and I could not thank you enough.

We saw the headless Chrome update coming up and we are all very excited! I think it will fix few problems once and for all! Cannot wait!

bitmoji

(I think i'm having too much fun with the bitemogi hahaha)

stevenbriscoeca commented 7 years ago

Anyone else in this thread could confirm it's working now so we can close this issue

garris commented 7 years ago

@stephenbe thanks for your kind words and positive energy! Keep up with the bitemogi!

mchepyala commented 7 years ago

@stephenbe I am new to backstop and trying to integrate with Casper, Can you provide me an example of your integration using the latest backstop version as a zip file.