Assert change in map when adding layer
Basically I need to check when I click on the map and add for instace weather layer if it is displaying properly. So far the two solutions i've came up with are:
1/ Go to map view, click layer, wait for response from backend with png with said layer, if its 200 so basically await page.waitForResponse(async (response) => await isFinished(response, 'Rain', 'Polygons'));
But this does not assert visually if the layer has been applied.
2/Go to map view, make a screen shot before and after change of layer and then getComparator('image/png'); expect(comparator(beforeImage, afterImage)).not.toBeNull(); However this seems like a slow solution but I can assert visually with confidence that change has been made. The scope is to write smoke tests, screenshort comparison seems like a regression test to me.
Maybe you guys have any ideas on what would be the best way to tackle that in playwright?
This thread is trying to answer question "What is the best way to test if a weather layer is properly displayed on a map when clicked?"
Hi, from my perspective, there are various kinds of smoke tests (full stack smoke test, micro-service smoke test, and more?). In end-to-end/full stack testing, smoke tests are validating that the business critical capabilities are working for the end-user, when all things are connected.
I suspect in your case, the map showing weather data is a business critical capability.
Changes to a map can only be verified visually (unless using something like scalable vector graphics), so to me, using visual assertions look like the way to go. Playwright has support for it: https://playwright.dev/docs/test-snapshots
If the backend system, which is returning the weather layer image, is not a test double (mock) service, and returning a different image every time, then probably you will want to replace the returned image by something fixed. https://playwright.dev/docs/network#handle-requests
Related Ask AI answer for "How do I use Playwright to verify if a weather layer has been successfully added to a map?".
Answer
Sure, you can use Playwright's web-first assertions to check if a weather layer is correctly displayed on a map. Here's how you can do it:
First, interact with the map and add the weather layer. Then, use an assertion like toBeVisible() to confirm its visibility. This assertion will wait for the weather layer to appear and retry if necessary.
Here's a sample code snippet:
import { test, expect } from '@playwright/test';
test('Check weather layer visibility', async ({ page }) => {
// Interact with the map and add the weather layer
// Check if the weather layer is visible
await expect(page.getByText('weather-layer')).toBeVisible();
});In this example, we're looking for a text element with "weather-layer" when the weather layer is displayed. You might need to adjust this selector based on your specific implementation.
Using web-first assertions like toBeVisible(), Playwright will wait for the expected condition before proceeding. This makes your tests reliable and accurate.
Remember to follow best practices while writing tests in Playwright. You can refer to Playwright's documentation on best practices for more information.
For more tips on writing efficient Playwright test scripts, check out this blog post.
Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email [email protected].