garris / BackstopJS

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

How to sync the backstop_data with custom captured screenshot in Onready script #948

Open nsp27 opened 5 years ago

nsp27 commented 5 years ago

I am doing some custom operation in Onready scripts using casper. I am able to save screenshots in a directory outside backstop_data. How I can sync those screenshots from casoper into backstop_data folder? Please help me

garris commented 5 years ago

Sorry. I don't understand this question.

But also, I recommend using puppeteer engine.

nsp27 commented 5 years ago

Below is my custom scripts for On Ready. I am taking screenshot iterating multiple themes. However, my screenshots are getting captured in "Screenshots" folder in the root of the workspace and I am not able to merge it with backstop_data. I want to save screenshots for different themes in backstop_data folder :-

module.exports = function (engine, scenarios, themes, vp) {

 themes = [

  {
    'name' : 'Gray theme',
    'theme' : "button[onclick='themeClickGray()']"

  },
  {
    'name' : 'Skyblue theme',
    'theme' : "button[onclick='themeClickSkyBlue()']"

  },
  {
    'name' : 'Blue theme',
    'theme' : "button[onclick='themeClickBlue()']"

  },
  {
    'name' : 'Navy theme',
    'theme' : "button[onclick='themeClickNavy()']"

  },

];

casper.each(themes,function(casper,theme){
  this.then(function(){

    this.echo ('screenshot for '+ theme.name + scenarios.label + vp.label);
    this.click(theme.theme);

    this.captureSelector('Screenshots/' + scenarios.label + vp.label +theme.name + '.png','#themePage');

  })

})
digitaldonkey commented 4 years ago

Similar Problem. I want to do things like https://github.com/garris/BackstopJS/issues/820#issuecomment-404963122

digitaldonkey commented 4 years ago

@garris Any chance we could do such things or do I need to go for a different Approach?

My case is similar: I have s slideshow and I want to capture each slide.

I could do this by writing a scenario for each slide. But I would have to maintain more tests and whenever the number of slides change I would need to update that scenario. It would be great if I could do something like above (one result to compare like backstop_default_nrwGOV_page-video-header_no-cookies_slide_0.png, ...slide_1.png, .. slide_2.png). Or alternatively mergeing the screenshots into one (similar to #820).

garris commented 4 years ago

Check the docs for generating dynamic scenarios. https://github.com/garris/BackstopJS#pass-a-config-object-to-the-command. You could write a node script to query your app -- find out how where all the content is and tell backstop to run with dynamically generated scenarios.

digitaldonkey commented 4 years ago

Preprocessing is not a good solution in our workflow. Let me just nail this down as the question pops up regularly 1 scenario = 1 screenshot And there is no way around it.

garris commented 4 years ago

1 scenario = 1 visual state. Backstop has some convenience features WRT taking multiple screenshots -- but the context is all the same state. Eg -- multiple selectors.

digitaldonkey commented 4 years ago

ok. I think I got it.

It would be really nice to be able to combine them freely in JS. Merging puppeteer screenshots like in #820 in a onReadyScript <3