BackstopJS: Not able to scroll the page to end using scrollToSelector - automation

Question

I am using two files one to keep all the URLs and other variables and other to keep the scenario config
const projectId = "test"; //
let baseUrl = "someurl"; //
let scrollToSelector = "";
let removeSelector = "";
// Replace the values of the below array with the relative URLs of your website. E.g., "/about", "/contact", "/pricing", etc.
// Use just "/" to test the homepage of your website.
// Add as many relative URLs as you need.
const relativeUrls =[
"/about",
"/documentation",
"/case-studies/",
"/solutions/",
"/blog/"
];
relativeUrls.map(relativeUrl => {
if (relativeUrl === "/about") {
scrollToSelector = "a.wp-block-button__link";
removeSelector = ".is-style-image-banner"
console.log(scrollToSelector);
}
});
// Leave the below array as is if you want to test your website using the viewports listed below.
// The suported viewports are: phone (320px X 480px), tablet (1024px X 768px), and desktop (1280px X 1024px).
// No other viewports are supported.
// You can remove the viewports that you don't need, but at least one of them is required.
const viewports = [
"phone",
"tablet",
"desktop",
];
module.exports = {
baseUrl,
projectId,
relativeUrls,
viewports,
scrollToSelector,
removeSelector
};
mainConfig.js
const THREE_SECONDS_IN_MS = 3000;
const scenarios = [];
const viewports = [];
basicConfig.relativeUrls.map(relativeUrl => {
scenarios.push({
label: relativeUrl,
url: `${basicConfig.baseUrl}${relativeUrl}`,
delay: THREE_SECONDS_IN_MS,
requireSameDimensions: false,
scrollToSelector: basicConfig.scrollToSelector,
removeSelectors: [basicConfig.removeSelector]
// onReadyScript: "onReadyScript.js",
// readyEvent: "page_loaded"
});
});
basicConfig.viewports.map(viewport => {
if (viewport === "phone") {
pushViewport(viewport, 320, 480);
}
if (viewport === "tablet") {
pushViewport(viewport, 1024, 768);
}
if (viewport === "desktop") {
pushViewport(viewport, 1280, 1024);
}
});
function pushViewport(viewport, width, height) {
viewports.push({
name: viewport,
width,
height,
});
}
module.exports = {
id: basicConfig.projectId,
viewports,
scenarios,
paths: {
bitmaps_reference: "test/backstop_data/bitmaps_reference",
bitmaps_test: "test/backstop_data/bitmaps_test",
html_report: "test/backstop_data/html_report"
},
report: ["CI"],
engine: "puppeteer",
engineOptions: {
args: ["--no-sandbox"]
},
asyncCaptureLimit: 5,
asyncCompareLimit: 50,
};
scrollToSelector doesn't seem to be working. Is there any other way it should declared and called.

Answer 1

Your scrollToSelector need to be in the rectangular parentesis [], like that scrollToSelector: ['.a.wp-block-button__link']