search

garris / BackstopJS

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

Clicking on reference url selectors #1177

Open prabhudatta22 opened 4 years ago

prabhudatta22 commented 4 years ago

Objective: Visual comparision of one web page in two different envs written in two different technologies

Scenario: Let's assume, the page was developed earlier using Drupal. Now the project is migrating to AEM. But all the visuals will remain as it is. Only the underlying technology will change. In this case, all the css selectors will also change.

Problem: In this backstop, only one "clickSelector" and "HoverSelector" are there which works for both testurl and reference url. But in the above scenario, we definitely need two set of selectors.

  1. for test url selectors: click/hover : which will work only for test url
  2. for reference url selector: click/hover : which will work only for reference

in this way even if the selectors changed for test and reference url, the actual test-objective wont fail.

What i done so far:

  1. added new locators to js file
  2. added new functions to read them

Where i struck:

Though i am able to get the reference locators into page.But i not able to select url on which i can add action

can anyone guide me here.

garris commented 4 years ago

There are lots of ways to do this -- here is one way.

Use onReady to do custom clicking -- see here... https://github.com/garris/BackstopJS/blob/master/README.md#running-custom-scripts

If isReference is true use reference selector. Inside your onReadyScript file...

const scenarioMap = {
  myScenario1: [`testSelectorName`, `referenceSelctorName`],
  myScenario2: [`testSelectorName`, `referenceSelctorName`]
  ...
}

module.exports = async (page, scenario, vp, isReference) => {
  const selectorIndex = isReference ? 1 : 0;
  const clickSelector = scenarioMap[scenario.label][selectorIndex]
  await page.click(clickSelector);
}
prabhudatta22 commented 4 years ago

I think this approach still didn't solve my purpose. Coz the "page" refers to "testurl" not "referenceurl". I want referenceUrl to click on "referenceClickSelecctor" and testurl to click on "testClickSelector".

prabhudatta22 commented 4 years ago

module.exports = async (page, scenario , isReference) => { console.log('Reference URL > ' + scenario.referenceUrl); const selectorIndex = isReference ? 1 : 0; var hoverSelector = scenario.hoverSelectors || scenario.hoverSelector; var clickSelector = scenario.clickSelectors || scenario.clickSelector;
var hoverReferenceSelector = scenario.hoverReferenceSelectors || scenario.hoverReferenceSelector; var clickReferenceSelector = scenario.clickReferenceSelectors || scenario.clickReferenceSelector;

var scrollToSelector = scenario.scrollToSelector; var postInteractionWait = scenario.postInteractionWait; // selector [str] | ms [int]

if (hoverSelector) { for (const hoverSelectorIndex of [].concat(hoverSelector)) { await page.waitFor(hoverSelectorIndex); await page.hover(hoverSelectorIndex); } }

if (clickSelector) { for (const clickSelectorIndex of [].concat(clickSelector)) { await page.waitFor(clickSelectorIndex); await page.click(clickSelectorIndex); } }

if(selectorIndex){ console.log('selectorIndex > ' + selectorIndex); if (hoverReferenceSelector) { for (const hoverSelectorIndex of [].concat(hoverReferenceSelector)) { await page.waitFor(hoverSelectorIndex); await page.hover(hoverSelectorIndex); } }

if (clickReferenceSelector) { for (const clickReferenceSelectorIndex of [].concat(clickReferenceSelector)) { await page.waitFor(clickReferenceSelectorIndex); await page.click(clickReferenceSelectorIndex); } } }

if (postInteractionWait) { await page.waitFor(postInteractionWait); }

if (scrollToSelector) { await page.waitFor(scrollToSelector); await page.evaluate(scrollToSelector => { document.querySelector(scrollToSelector).scrollIntoView(); }, scrollToSelector); } };

prabhudatta22 commented 4 years ago

This is what i did. But its not working as expected

prabhudatta22 commented 4 years ago

[ { label: 'Abbott Store PDP Page-1', url: 'https://abbottstore.com', referenceUrl: 'https://similacstore.com/', hoverSelector: '', clickSelector: '#authorization-trigger', onReadyScript: '', onBeforeScript: '', isReference: 'TRUE', hoverReferenceSelector: '', clickReferenceSelector: 'body > div.page-wrapper > header > div > div > div > div.link-cart-container > div > a' } ] COMMAND | Executing core for "reference" clean | backstop_data/bitmaps_reference was cleaned. createBitmaps | Selected 1 of 1 scenarios. CREATING NEW REFERENCE FILE Using Chrome/Chromium version: 77 Cookie state restored with: [] Browser Console Log 0: JSHandle:JQMIGRATE: Logging is active Browser Console Log 0: JSHandle:BackstopTools have been installed. SCENARIO > Abbott Store PDP Page-1 Reference URL > https://similacstore.com/ isReference > undefined