Change a route in Google Maps

This test executes an end-to-end workflow using Google Maps, specifically the map portion of the application that is enclosed in a <canvas> tag. The user enters a predetermined route from point A (Wolf, CA) to point B (Wolf, Wy). The test takes a screen capture of the resulting map. The user then selects a point on the route and drags that point to another location and drops it, thus changing the initial route. The test takes another screen capture to compare it against the original to validate that the two snapshots are not equal.

Visual diffing

Since there weren’t any HTML elements in our target iFrame apart from a <canvas> tag, we needed to use visual diffing to create this test. QA Wolf has fully-featured visual diffing built into our platform. We use Playwright’s visual assertions as the foundation of our visual diffing feature and have built debugging tools that allow our testers to easily compare snapshots.

Drag & Drop

In this test, we easily found a script on the company’s internal knowledge base that allowed us to use our mouse to find the x and y coordinates of any point in our canvas iFrame, which made it easy for us to select the right point on the map to hover over, click and drag.

‍