← Back to Discord Forum

Asserting Array properly in the test

martinh3309posted in #help-playwright
Open in Discord

Hey friends! I am striving to run a simple test based on the Playwright tutorial. It is failing because it seems to expect Array in a different format. I tried different variations, also used AI but id didn't help anyone has any ideas? I would appreciate it a lot! Here is the code snippet: *test('Verify navigation links', async ({page}) => { const expectedLinks = ["TOURNAMENTS", "WATCH", "PLAY", "LIVE", "SHOP", "NEWS", "INSIDE FIFA"];

await page.goto("https://www.fifa.com/fifaplus/en/home");
const navLinks = page.locator('div[id="mainLinksID"]');
await expect(navLinks).toBeVisible();
await page.waitForTimeout(3000);
expect(await navLinks.allInnerTexts()).toEqual(expectedLinks)

This thread is trying to answer question "How can one properly assert an array in a test when the elements are not in the same position?"

5 replies

the gotten array from the website is diffrent elements are not in the same position as your array

one way to fix your test would be to use this assertion expect(array1.sort()).toEqual(array2.sort());

sort the arrays firsts than compare those values

I wonder, would it be a product bug for a list to not be sorted. Hard for me to think of any lists that are displayed in any program or UI i use these days where lists are not sorted and/or don't provide a way to sort them. Even then to insulate myself in such cases i have a generic function that will take two List<string> compare two lists, and they don't care about order. Will report "item1" in list 'a" but not in list 'b' and report "item 3" in list 'b' but not in list 'a'. Sorted or not sorted...


Thank you for your answers! I tried @pregot your suggestion, unfortunately it does not work for me. Or maybe I type it wrong, could you double check


Asserting Arrays in Tests with Playwright

When testing with @playwright/test, you might need to assert arrays where elements aren't in the same position. Here's how you can do it.

Using toHaveText

Playwright's LocatorAssertions class provides a method called toHaveText. This method checks if a locator points to elements with specific text values. Here's how you can use it:

await expect(page.locator('ul > li')).toHaveText(['Text 1', 'Text 2', 'Text 3']);

This will pass if the <li> elements have the text values "Text 1", "Text 2", and "Text 3" in any order. If you want to assert a specific order, provide the expected text values in that order:

await expect(page.locator('ul > li')).toHaveText(['Text 3', 'Text 2', 'Text 1']);

Using toContainEqual

If you only want to assert that certain items exist within an array without considering their positions, you can use toContainEqual from GenericAssertions. This method checks if a collection contains an object with properties matching those of your expectation. Here's an example:

const value = [
   { example: 1 },
   { another: 2 },
   { more: 3 },

expect(value).toContainEqual({ another: 2 });

This will pass because there is an object within value that has a property named "another" with a value of 2.

In summary, toHaveText and toContainEqual are powerful tools for accurate and detailed assertions in your tests. Happy testing with Playwright!

Related Discord Threads

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

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 luc@ray.run.