1

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.

Juhi Saxena
  • 1,197
  • 11
  • 17

1 Answers1

0

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

Viktor Vasylkovskyi
  • 11
  • 2