How do I compare the visual differences of an element on a page using CodeceptJS?

I have just started to use CodeceptJS and I'm having some trouble getting the seeVisualDiffForElement command working.

This is my test code so far:

Feature('MyTest');

Scenario('Creating base images and comparing using the same command but ran twice',  (I) => {

    I.amOnPage('https://testsite-90d35.firebaseapp.com/');

    I.wait(1);

    I.saveScreenshot("Test1.png");

    I.wait(1);

    I.seeVisualDiff("Test1.png", {tolerance: 0, prepareBaseImage: true});
});

Scenario ('Comparing the blue button on the page', async (I) => {

    I.amOnPage('https://testsite-90d35.firebaseapp.com/testPage.html');

    I.wait(1);

    I.saveScreenshot("Test1.png");

    I.wait(1);

    I.seeVisualDiffForElement(".btnBlue","Test1.png", {tolerance: 0, prepareBaseImage: false});
});

When I run this code it opens the Chromium browser (as I'm using it with Puppeteer) and runs through the first scenario just fine. Takes the screenshot and saves it as a base image. Then I have to close the browser for it to run the next scenario. After the 2nd scenario has ran it fails the test but still creates the screenshots. The screenshots are different as they should be but the diff screenshot doesn't have any outlined changes.

In the documentation for CodeceptJS it states "seeVisualDiffForElement only works when the page for baseImage is open in the browser, so that webdriver can fetch coordinates of the provided selector". My browser is open but not the same browser that created the base image (as I have to close it to run the 2nd scenario). Could this be why the test fails and doesn't recognise any changes? Or can anyone see something else I'm doing wrong?

I've tried to run the tests as a single scenario as well but it gives me the same output.

Solution

I was informed that element testing only works with WebDriver, but I was using Puppeteer, hence the errors.