Feature request: run tests in same tab instead of separate browser instances

[simondib]

Currently testing a responsive component or page layout across multiple breakpoints requires a separate headless browser instance.

It might be much more efficient to resize the same browser window instead of spawning a new instance for each test. This would reduce test execution times dramatically.

[NimaSoroush]

Just realised that you need this basically https://github.com/NimaSoroush/differencify/blob/master/API.md#share-browser

This will still open new tab per test but that latency is really minimal. Hope this is what you are looking for

[simondib]

I've given this suggestion a go, but still seeing fairly length page load times for are essentially just window resizes:

✓ appears correctly on x-small devices (4808ms)
✓ appears correctly on small-medium devices (7286ms)
✓ appears correctly on medium devices (7191ms)
✓ appears correctly on large devices (8775ms)

Is this expected? I'd think the initial page load would be longer, but subsequent tests only requiring a change in viewport size (and not a page refresh) would be much quicker?

[NimaSoroush]

window resize should not take that long. Can you run them in non-headless mode and see what is going on?

[NimaSoroush]

BTW, I am working on a new feature that will boost the test execution a lot (like 20 times faster). Still at POC level but planning to release it soon. So if the current performance does not bother you much you can wait for that

[simondib]

Non-headless mode opens a single browser, but launches each test in a new tab - so the load time is still lengthy.

I tried removing .newPage() for subsequent tests to attempt to force the test in the same tab, but was getting strange test results. For example, the first test passed showing correct styles but subsequent tests gave false positives (logo on the right should not be appearing):

it("appear correctly on large devices", async () => {
  await differencify
    .init()
    .newPage()

    .setViewport(getViewport('large', VIEWPORT_HEIGHT))
    .goto(TEST_HOST + PATH)
    .waitFor(DELAY)

    .screenshot()
    .toMatchSnapshot()
    .close()
    .end();
});

it("appear correctly on medium devices", async () => {
  await differencify
    .init()
    // .newPage()

    .setViewport(getViewport('medium', VIEWPORT_HEIGHT))
    .goto(TEST_HOST + PATH)
    .waitFor(DELAY)

    .screenshot()
    .toMatchSnapshot()
    .close()
    .end();
});

Ideally testing a simple viewport change could be run in the same tab.

Great to hear about he POC speed boost. Loving Differencify, just looking at ways we can get the most out of it.