Compare two image

[dbrau]

Hello sitespeed-team,

We are using the dashbord to measure performance data from our website. I created a js-File in

/opt/sitespeedio/dashboard/tests//desktop/scripts

with the following content

module.exports = async function(context, commands) {
  // We start by navigating to the login page.
  await commands.navigate(
    'https://<URL>'
  );

  // When we fill in a input field/click on a link we wanna
  // try/catch that if the HTML on the page changes in the feature
  // sitespeed.io will automatically log the error in a user friendly
  // way, and the error will be re-thrown so you can act on it.
  try {
    // Add text into an input field, finding the field by id
    try {
         await commands.addText.byId('<USER>', 'principal_name');
         await commands.addText.byId('<PASSWORD>', 'password');

         // Find the sumbit button and click it and then wait
         // for the pageCompleteCheck to finish
         await commands.click.byIdAndWait('submit');
         await commands.wait.byTime(2000);
         await commands.screenshot.take('screen_login_success');
    } catch (e) {
         commands.error('Add value not possible');
         await commands.screenshot.take('screen_login_failed');
    }
    // Measure the site page as a logged in user

// click to open groupware
    await commands.measure.start('Loading groupware');
    try {
       await commands.click.byXpathAndWait('/html/body/div[1]/div[2]/div[1]/div[3]/a');
       await commands.screenshot.take('screen_groupware');
    } catch (e) {
         commands.error('groupware not working');
         await commands.screenshot.take('screen_groupware_failed');
    }
    await commands.measure.stop();

// Logout         
    await commands.screenshot.take('screen_before_logout');
    try {
      await commands.click.byXpathAndWait('/html/body/div[1]/div[2]/div[3]/div[2]/a');
      await commands.screenshot.take('screen_success_logout');
    } catch (e) {
      commands.error('Logout not possible');
      await commands.screenshot.take('screen_logout');
    }
    return await commands.screenshot.take('screen_after_last_stop');
  } catch (e) {
    context.log.error(e);
    await commands.screenshot.take('fail_complete');
    // We try/catch so we will catch if the the input fields can't be found
    // The error is automatically logged in Browsertime and re-thrown here
  }
};

As you seen we take a screenshot after every commands.click.byXpathAndWait command. Now I would like to know if it's possible to compare this created screenshot with another screenshot to find out if the site is available and measure what we expected? If not a error message should be issued.

We want to make sure that the page is as we expected. So if it's not possible to compare the screenshot/jpeg files we could also imagine that a string is compared.

Or is there another way to find out if a page is unavailable?

Thanks you very much in advance.

[dbrau]

Hello @soulgalore,

I wanted to ask again if you can help me with the above topic. Would like to implement this as soon as possible.

Thanks you

[dbrau]

The problem has been resolved, so the ticket is closed