Possibility of integration with Taiko

Hello!
We have a project already fully developed using Taiko framework but we want to introduce BackstopJS and visual automation to it.
We were wondering about the possibility of integrating BackstopJS not only to Playwright and Puppeteer but also Taiko (all those frameworks are JS based and similar)
https://taiko.dev/
https://github.com/getgauge/taiko
So the question would be:

Is it possible at all?
Where to start, could I get a contact of some sort, to get a guidance?

Hi @SzajJolanta, sure. Depending on how Taiko is built, it could be straight forward to do the integration. There is a single file in backstop for each automation driver (e.g. playwright, puppeteer), for example...

runPlaywright.js takes a single backstop scenario, passes it to the driver (playwright in this case) and waits for the driver to complete a setup and screen capture. e.g. here is the entrypoint...

BackstopJS/core/util/runPlaywright.js

Lines 46 to 62 in f0651dc

    
           module.exports.runPlaywright = function (args) { 
        
             const scenario = args.scenario; 
        
             const viewport = args.viewport; 
        
             const config = args.config; 
        
             const browser = args._playwrightBrowser; 
        
             const scenarioLabelSafe = engineTools.makeSafe(scenario.label); 
        
             const variantOrScenarioLabelSafe = scenario._parent ? engineTools.makeSafe(scenario._parent.label) : scenarioLabelSafe; 
        
             config._bitmapsTestPath = config.paths.bitmaps_test || DEFAULT_BITMAPS_TEST_DIR; 
        
             config._bitmapsReferencePath = config.paths.bitmaps_reference || DEFAULT_BITMAPS_REFERENCE_DIR; 
        
             config._fileNameTemplate = config.fileNameTemplate || DEFAULT_FILENAME_TEMPLATE; 
        
             config._outputFileFormatSuffix = '.' + ((config.outputFormat && config.outputFormat.match(/jpg|jpeg/)) || 'png'); 
        
             config._configId = config.id || engineTools.genHash(config.backstopConfigFileName); 
        
             return processScenarioView(scenario, variantOrScenarioLabelSafe, scenarioLabelSafe, viewport, config, browser); 
        
           };

Individual driver flows are called by createBitmaps.js, here is the switch statement...

BackstopJS/core/util/createBitmaps.js

Lines 132 to 155 in f0651dc

    
             if (config.engine.startsWith('puppet')) { 
        
               return pMap(scenarioViews, runPuppet, { concurrency: asyncCaptureLimit }); 
        
             } else if (config.engine.startsWith('play')) { 
        
               return new Promise((resolve, reject) => { 
        
                 createPlaywrightBrowser(config).then(browser => { 
        
                   console.log('Browser created'); 
        
                   for (const view of scenarioViews) { 
        
                     view._playwrightBrowser = browser; 
        
                   } 
        
                   pMap(scenarioViews, runPlaywright, { concurrency: asyncCaptureLimit }).then(out => { 
        
                     disposePlaywrightBrowser(browser).then(() => resolve(out)); 
        
                   }, e => { 
        
                     disposePlaywrightBrowser(browser).then(() => reject(e)); 
        
                   }); 
        
                 }, e => reject(e)); 
        
               }); 
        
             } else if (/chrom./i.test(config.engine)) { 
        
               logger.error('Chromy is no longer supported in version 5+. Please use version 4.x.x for chromy support.'); 
        
             } else { 
        
               logger.error(`Engine "${(typeof config.engine === 'string' && config.engine) || 'undefined'}" not recognized! If you require PhantomJS or Slimer support please use backstopjs@3.8.8 or earlier.`); 
        
             } 
        
           }

So, that is pretty much the Backstop-related surface area you need to be concerned with. And you'd also want to update the docs and runtime-boilerplate code of course.

I am not familiar with Taiko, so, I would want to see some decent flow compatibility with Backstop in general -- since it will add complexity, I would like to know what benefits Taiko would bring to justify the enhancement -- ideally, I would expect a vanilla/default implementation to behave the same across all drivers with the differences being more in the advanced features or performance curves etc.

I don't have a lot of time to put into the project at this point -- but if you want to put in the effort to build an integration I am happy to consult occasionally on zoom or teams to answer questions and help in ways that I can. I would ask that you have other engineers review and approve your contributions and that you own any related issues that come in from the community.

Cheers.

Hello!
Thank you for your fast reply, it was very helpful.
We are consulting the possibilities within the team and will let you know on the progress.

Jola

	module.exports.runPlaywright = function (args) {
	const scenario = args.scenario;
	const viewport = args.viewport;
	const config = args.config;
	const browser = args._playwrightBrowser;
	const scenarioLabelSafe = engineTools.makeSafe(scenario.label);
	const variantOrScenarioLabelSafe = scenario._parent ? engineTools.makeSafe(scenario._parent.label) : scenarioLabelSafe;

	config._bitmapsTestPath = config.paths.bitmaps_test \|\| DEFAULT_BITMAPS_TEST_DIR;
	config._bitmapsReferencePath = config.paths.bitmaps_reference \|\| DEFAULT_BITMAPS_REFERENCE_DIR;
	config._fileNameTemplate = config.fileNameTemplate \|\| DEFAULT_FILENAME_TEMPLATE;
	config._outputFileFormatSuffix = '.' + ((config.outputFormat && config.outputFormat.match(/jpg\|jpeg/)) \|\| 'png');
	config._configId = config.id \|\| engineTools.genHash(config.backstopConfigFileName);

	return processScenarioView(scenario, variantOrScenarioLabelSafe, scenarioLabelSafe, viewport, config, browser);
	};

	if (config.engine.startsWith('puppet')) {
	return pMap(scenarioViews, runPuppet, { concurrency: asyncCaptureLimit });
	} else if (config.engine.startsWith('play')) {
	return new Promise((resolve, reject) => {
	createPlaywrightBrowser(config).then(browser => {
	console.log('Browser created');

	for (const view of scenarioViews) {
	view._playwrightBrowser = browser;
	}

	pMap(scenarioViews, runPlaywright, { concurrency: asyncCaptureLimit }).then(out => {
	disposePlaywrightBrowser(browser).then(() => resolve(out));
	}, e => {
	disposePlaywrightBrowser(browser).then(() => reject(e));
	});
	}, e => reject(e));
	});
	} else if (/chrom./i.test(config.engine)) {
	logger.error('Chromy is no longer supported in version 5+. Please use version 4.x.x for chromy support.');
	} else {
	logger.error(`Engine "${(typeof config.engine === 'string' && config.engine) \|\| 'undefined'}" not recognized! If you require PhantomJS or Slimer support please use backstopjs@3.8.8 or earlier.`);
	}
	}