Advanced Playwright test (Advanced)

Sample questions

5 sample questions from the Advanced Playwright test, with the answers. Samples are taken out of the live test, so you will not meet these when you sit it.

1. What will happen when a test using `await expect(page).toHaveScreenshot('home.png')` runs, and the current image differs from the baseline by a small amount that is within the defined threshold?

   1. The test will automatically update the baseline if the differences are within the threshold.
   2. The test will retry indefinitely until the image matches the baseline, regardless of the threshold.
   3. The test will pass if the image matches the baseline or if the differences are within the threshold and the test retries until two consecutive screenshots match.
   4. The test will fail immediately if the image does not match the baseline, even if the differences are within the threshold.

   Answer: C. The test will pass if the image matches the baseline or if the differences are within the threshold and the test retries until two consecutive screenshots match.

   When using `toHaveScreenshot`, the test first compares the current screenshot to the stored baseline. If the images differ but the differences are within the defined tolerance (`maxDiffPixels`, `maxDiffPixelRatio`, or `threshold`), the test will retry until two consecutive screenshots match, at which point it will pass. If the differences exceed the threshold, the test will fail. The test does not automatically update the baseline unless `--update-snapshots` is used.

2. A test using `toHaveScreenshot` is failing with a visual comparison error, but the image looks identical to the baseline when viewed manually. What is the most likely reason for this discrepancy?

   1. The test failed due to an unrelated error, such as a missing dependency or a network issue.
   2. The threshold value was set too low, causing minor pixel differences to trigger failures.
   3. The baseline image was generated on a different platform (e.g., Mac) than the one used in CI (e.g., Linux).
   4. The test did not use the `--update-snapshots` flag to update the baseline image.

   Answer: C. The baseline image was generated on a different platform (e.g., Mac) than the one used in CI (e.g., Linux).

   Playwright stores visual baselines per browser and platform (e.g., `home-chromium-linux.png`), because rendering can differ across operating systems. If a baseline is generated on a Mac and compared in a Linux CI environment, the pixel differences caused by platform-specific rendering will trigger a failure. This is a common mistake in visual comparisons.

3. What is the correct approach to handle dynamic elements and animations when performing visual comparisons with Playwright?

   1. Rely on exact pixel matching without any masking or animation handling to ensure precision.
   2. Use `toHaveScreenshot` with `mask` to hide dynamic elements and `animations: 'disabled'` to eliminate flickering in visual comparisons.
   3. Use `toHaveScreenshot` without any configuration and let Playwright automatically handle dynamic elements.
   4. Use `toHaveScreenshot` with `threshold: 1` to allow full differences between screenshots.

   Answer: B. Use `toHaveScreenshot` with `mask` to hide dynamic elements and `animations: 'disabled'` to eliminate flickering in visual comparisons.

   When comparing screenshots in Playwright, it is important to mask dynamic elements such as timestamps or other UI elements that change frequently, and to disable animations that can cause flickering or inconsistent rendering. This ensures accurate and stable visual comparisons. Using `toHaveScreenshot` with `mask` and `animations: 'disabled'` is the correct approach. Other options, such as relying on absolute pixel matching or not handling dynamic content, can lead to unnecessary test failures.

4. Which of the following statements accurately describes how Playwright Test manages test concurrency in CI pipelines by default?

   1. Playwright Test runs tests in parallel by default, but each test is executed in a separate browser instance, not a worker process.
   2. Playwright Test runs test files sequentially in a single worker process by default, with parallelism disabled unless explicitly configured.
   3. Playwright Test automatically runs test files in parallel across worker processes, with the default number of workers set to half the CPU cores.
   4. Playwright Test runs tests in parallel across worker processes by default, but the number of workers is set to the total number of CPU cores.

   Answer: C. Playwright Test automatically runs test files in parallel across worker processes, with the default number of workers set to half the CPU cores.

   In Playwright, tests are run in parallel across worker processes by default, which helps improve performance in CI pipelines. The default number of workers is set to half the CPU cores, but this can be adjusted using the `workers` configuration or the `--workers` command-line flag. Other options are incorrect because they either describe a different feature or are not accurate representations of how Playwright manages test concurrency in CI pipelines.

5. When performing visual comparisons in Playwright, which approach ensures consistent rendering across different environments by hiding elements that may vary?

   1. Use absolute URLs for all image baselines to avoid caching issues.
   2. Rely on default settings for visual comparisons and let Playwright handle caching automatically.
   3. Use `stylePath` to hide elements and ensure consistent rendering across environments.
   4. Disable animations and set `threshold` to 0 to ensure strict image comparison.

   Answer: C. Use `stylePath` to hide elements and ensure consistent rendering across environments.

   When performing visual comparisons, it's essential to ensure consistent rendering across different environments. Using `stylePath` allows you to hide elements that may vary across platforms or browsers, such as timestamps or dynamically generated content. This helps avoid unnecessary differences in the screenshot and ensures that only the relevant parts of the page are compared. Other options like using absolute URLs or relying on default settings may lead to mismatches due to platform-specific rendering differences.