checkScreen method is removing an entire UI component when take screenshoot - EDITED

[Juani-Canete-zz]

Environment details

• Node.js version: [10.16.3]
• NPM version: [6.12.10]
• Browser name and version: [Chrome 78.0.3904.108]
• Platform name and version: [Windows 10]
• protractor version: [5.4.2]
• protractor-image-comparison version: [3.8.1]

My plugin configuration is abstracted in an utilities file.

  static pluginConfig = [
    {
      package: "protractor-image-comparison",
      options: {
        baselineFolder: join(process.cwd(), "./image-comparison/baseline/"),
        formatImageName: `{tag}-{logName}-{width}x{height}`,
        screenshotPath: join(
          process.cwd(),
          "./image-comparison/actual_screenshots/"
        ),
        savePerInstance: true,
        debug: false,
        disableCSSAnimation: true,
        clearRuntimeFolder: true,
        autoSaveBaseline: true
      }
    }
  ];

And from my conf.js I called as

plugins: PluginUtilities.pluginConfig,

And this is a sample tests that we are using

import { browser } from "protractor";
import { homePage } from "../page-objects/home-page";

describe("Psh site validations - Visual Test Demo", () => {
  it("Image-comparison with element and screen", async () => {

     //Saving element
    await browser.imageComparison.saveElement(homePage.topbar, "topbar", {});

    //Comparing element with baseline
    expect(await browser.imageComparison.checkElement(homePage.topbar, "topbar",{})).toEqual(0);

    await homePage.click(homePage.contactUs);

    //Saving screen
    await browser.imageComparison.saveScreen("contactUsFillExample", {});

    //Comparing with baseline
    expect(await browser.imageComparison.checkScreen("contactUsFillExample", {})).toEqual(0);
  });
});

Describe the bug

This is how I see the image

But It's just me, other members of my team using linux and Mac are getting this same image completely

We need our automated-framework to support windows because we have developers using C# and we are roll-outing this tool also to them.

To Reproduce Steps to reproduce the behavior: Using windows as environment and using the config provided

1. Go to the site attached
2. saveScreen using the plugin

Expected behavior I would like to get the screenshot exactly as looks in the platform. This is the site.

Log I'm getting toEqual pixel errors, because when compare (for sure) I've differences.

Additional context I tried out with the following package versions of pr-img-comp: 3.8.1 3.8.0 3.7.0

Also I tried out using disabledCSSanimation with true and false as well.

I'll be happy to bring more details if are needed

[ennjin]

Hi, @Juani-Canete, I can confirm that disableCSSAnimation works incorrect (have the same trouble). By the way, you can add browser.sleep() before taking screenshot, it should solve the problem.

UPD. Also, you can use expect conditions for full page loading. See docs here https://www.protractortest.org/#/api?view=ProtractorExpectedConditions

Small note: I see that autoSaveBaseline option is enable, so you don't need saving screenshots.

[Juani-Canete-zz]

Hi @vitalie-ly I tried adding the sleep, and I get the same screenshot.

Using disableCSSAnimation: false,

Test: (Thanks for your recommendation about baseline =D )

import { browser } from "protractor";
import { homePage } from "../page-objects/home-page";

describe("Psh site validations - Visual Test Demo", () => {
  it("Image-comparison with element and screen", async () => {

    //Comparing element with baseline
    await browser.sleep(5000);
    expect(await browser.imageComparison.checkElement(homePage.topbar, "topbar",{})).toEqual(0);

    await homePage.click(homePage.contactUs);

    //Comparing with baseline
    await browser.sleep(5000);
    expect(await browser.imageComparison.checkScreen("contactUsFillExample", {})).toEqual(0);
  });
});

And I still getting the same screenshot.

[Juani-Canete-zz]

@vitalie-ly I was seeing the execution and it seems that in the specific moment of the screenshot, the UI component just disappear.

I'll take a video so you can see what I'm seeing.

[Juani-Canete-zz]

@vitalie-ly Here is the video:

Second 00:44 you should see the blink that produces the UI component to disappear from the screenshot.

https://drive.google.com/file/d/1vt5ICY6ncFAzEApBPm6DO237g0bURRcE/view?usp=sharing

[ennjin]

@Juani-Canete, try add --disable-gpu and --no-sandbox extra flags to chrome options.

[Juani-Canete-zz]

@vitalie-ly I tried with no lucky.

static chromeConfigs = {
    browserName: "chrome",
    chromeOptions: {
      args: [
        "--headless",
        "--window-size=1550,768",
        "--disable-gpu",
        "--no-sandbox"
      ]
    },
    shardTestFiles: false,
    maxInstances: 1
  };

I'm doing something wrong?

[wswebcreation]

@Juani-Canete

I don't have time to check it right away, but based on your script you should not use this all the time

//Saving element
await browser.imageComparison.saveElement(homePage.topbar, "topbar", {});

expect(await browser.imageComparison.checkScreen("contactUsFillExample", {})).toEqual(0);

Doing this should be enough, because it already saves the image

expect(await browser.imageComparison.checkScreen("contactUsFillExample", {})).toEqual(0);

See also https://github.com/wswebcreation/protractor-image-comparison#do-i-need-to-use-a-savescreenelementfullpagescreen-methods-when-i-want-to-run-checkscreenelementfullpagescreen

This could be the problem because the module is doing a lot of magic in the background which could cause some problems if you don't use it correctly.

Can you verify it?

[ennjin]

@Juani-Canete, have no more idea, but try install latest chrome version and update drivers by using command npx webdriver-manager update.

[Juani-Canete-zz]

Hello @wswebcreation.

This could be the problem because the module is doing a lot of magic in the background which could cause some problems if you don't use it correctly.

Can you verify it?

I've already fixed that, due a recommendation that @vitalie-ly point me out a few comments ago, and the "issue" is sitll happening to me.

[Juani-Canete-zz]

@vitalie-ly @wswebcreation I'm going to edit the issue title since the saveScreen method was removed from my tests, and the problem is still there, I think that this could be an SO related problem.

This is happening using checkScreen since this is my current test:

import { browser, protractor } from "protractor";
import { homePage } from "../page-objects/home-page";
const EC = protractor.ExpectedConditions;

describe("Psh site validations - Visual Test Demo", () => {
  it("Image-comparison with element and screen", async () => {

    await homePage.click(homePage.contactUs);

    await browser.wait(
      EC.visibilityOf(contactPage.nameField),
      5000,
      "Name field is not visible in the page"
    );

    // Check a screen
    await browser.sleep(5000);
    expect(
      await browser.imageComparison.checkScreen("contactUsFillExample", {})).toEqual(0);
  });
});

[Juani-Canete-zz]

@Juani-Canete, have no more idea, but try install latest chrome version and update drivers by using command npx webdriver-manager update.

I tried out updating and seems to be solved, I've minor differences with my co-workers baselines, but it need to check why this is happening and make a joint comparison with them!

Thanks for quickly responses, btw it's an awesome plugin!