Synthetics inline script not working per expectation

Elastic Observability
1

I am trying the following synthetics inline script on elastic cloud.
The line expect(productImages.length).toBe(9); is causing error Error: expect(received).toBe(expected) // Object.is equality

Following is the inline code i am trying

const URL = 'https://elastic-synthetics-demo-ecommerce.vercel.app/';
 step('visit landing page', async () => {
    await page.goto(params.url || URL, { waitUntil: 'networkidle' });
    // check to make sure all products are loaded
    const productImages = await page.$$('.card img');
    expect(productImages.length).toBe(9);
  });

If we look into monitor and look at "Script executed at this step" it looks like following. You can notice on $ instead of $$ in front of ('.card img'); I suspect that is the issue as $('.card img'); is not returning an array.

async () => {
    await page.goto(params.url || URL, { waitUntil: 'networkidle' });
    // check to make sure all products are loaded
    const productImages = await page.$('.card img');
    expect(productImages.length).toBe(9);
  }
2

The Synthetics is using Playwright for browser interactions. And $$ seems to be not a recommended way to get elements on the page. Instead, you can use the Locator Object.

Here's the link to the Locator Object's documentation.
Locator Class Reference

Your code will become something like this when using Locator:

const URL = 'https://elastic-synthetics-demo-ecommerce.vercel.app/';
 step('visit landing page', async () => {
    await page.goto(params.url || URL, { waitUntil: 'networkidle' });
    // check to make sure all products are loaded
    const productImages = await page.locator('.card img');
    expect(await productImages.count()).toBe(9);
  });
3

Cool it worked for me. Thank you for your reply

1 Like