locator

Map Locator

Locators are the central piece of MapGrab auto-waiting and retry-ability. In a nutshell, locators represent a way to find element(s) on the map at any moment.

---

first

Returns locator to the first matching element

playwright

test("foo test", async ({ mapLocator }) => {
  const locator = mapLocator('layer[id=cities]').first();

  await locator.click();
  ...
});

cypress

it('foo test', () => {
  cy.mapLocator('layer[id=cities]')
    .first<MapLocator>()
    .then((locator) => locator.click())
});

---

last

Returns locator to the last matching element

playwright

test("foo test", async ({ mapLocator }) => {
  const locator = mapLocator('layer[id=cities]').last();

  await locator.click();
  ...
});

cypress

it('foo test', () => {
  cy.mapLocator('layer[id=cities]')
    .last<MapLocator>()
    .then((locator) => locator.click())
});

---

nth

Returns locator to the nth matching element

playwright

test("foo test", async ({ mapLocator }) => {
  const locator = mapLocator('layer[id=cities]').nth(2);

  await locator.click();
  ...
});

cypress

it('foo test', () => {
  cy.mapLocator('layer[id=cities]')
    .eq<MapLocator>(2)
    .then((locator) => locator.click())
});

---

merge

Returns merged all elements matched to locator

playwright

test("foo test", async ({ mapLocator }) => {
  const locator = mapLocator('layer[id=cities]').merge(); // Merge all cities
  const locator2 = mapLocator('layer[id=cities]').merge('countryCode').last(); //Merge city by property: countryCode;

  await locator.click();
  await locator2.click();
  ...
});

cypress

it('foo test', () => {
  cy.mapLocator('layer[id=cities]')
    .merge()
    .then((locator) => locator.click())
});

---

fitMap

Fit map to locator element bounding box

playwright

test("foo test", async ({ mapLocator }) => {
  await mapLocator('layer[id=cities]').first().fitMap();
  ...
});

cypress

it('foo test', () => {
  cy.mapLocator('layer[id=cities]')
    .first()
    .then((locator) => locator.fitMap())
});

---

click

Click an element on map

playwright

test("foo test", async ({ mapLocator }) => {
  await mapLocator('layer[id=cities]').first().click();
  ...
});

cypress

it('foo test', () => {
  cy.mapLocator('layer[id=cities]')
    .first()
    .then((locator) => locator.click())
});

---

dblclick

Double click an element on map

playwright

test("foo test", async ({ mapLocator }) => {
  await mapLocator('layer[id=cities]').first().dblclick();
  ...
});

cypress

it('foo test', () => {
  cy.mapLocator('layer[id=cities]')
    .first()
    .then((locator) => locator.dblclick())
});

---

boundingBox

Double click an element on map

playwright

test("foo test", async ({ mapLocator, mapLocator }) => {
  const controller = mapController('mainMap');
  const city = mapLocator('layer[id=cities]').first();
  const bbox = await locator.boundingBox();

  await controller.fitMapToBoundingBox(bbox, { padding: 5 });
  ...
});

cypress

it('foo test', () => {
  cy.mapLocator('layer[id=cities]')
    .first()
    .then((locator) => locator.boundingBox())
});

---

count

Returns the number of elements matching the locator.

playwright

test("foo test", async ({ mapLocator }) => {
  const citiesCount = await mapLocator('layer[id=cities]').count();

  expect(citiesCount).toBe(22);
  ...
});

cypress

it('foo test', () => {
  cy.mapLocator('layer[id=cities]')
    .then((locator) => locator.count())
    .should('have.eq', 22);
});

---

screenshot (playwright only)

Returns the screenshot for element on map

playwright

test("foo test", async ({ mapLocator }) => {
  const snap = await mapLocator('layer[id=cities]').first().screenshot({ padding: 11, backgroundColor: 'red' });

  await expect(snap).toMatchSnapshot('cities.png');
  ...
});

---