Question: What's the proper way to create a base screenshot from element?

[mirao]

Suppose I have no base screenshot created yet. I'm trying this:

Feature('My');

Scenario('test something',  ({ I }) => {
    I.amOnPage("https://codecept.io");
    I.wait(5);
    I.saveElementScreenshot(".sub-bar", "Bar.png");
    I.checkVisualDifferences("Bar.png");
});

But when I run the test, a base screenshot of whole page is created instead of the element .sub-bar only.

In codeceptjs-resemblehelper I do it this way:

Feature('My');

Scenario('test something',  ({ I }) => {
    I.amOnPage("https://codecept.io");
    I.wait(5);
    I.saveElementScreenshot(".sub-bar", "Bar.png");
    I.seeVisualDiff("Bar.png", { prepareBaseImage: true, tolerance: 0 });
});

and you get a base screenshot of the element only as expected.

[mirao]

Well, it seems that the Playwright's method I.saveElementScreenshot() cannot be used.
Instead I.takeScreenshot("Bar.png", "expected", ".sub-bar") must be used to get it working

Feature('My');

Scenario('test something',  ({ I }) => {
    I.amOnPage("https://codecept.io");
    I.wait(5);
    I.takeScreenshot("Bar.png", "expected", ".sub-bar");
    I.checkVisualDifferences("Bar.png");
});

and when a base screenshot is created, then the option must be changed to actual (Note that expected might not be committed to Git repo)