How to Compare two arrays for Equality irrespective of their order in Playwright

Playwright uses Jest Library for its testing assertions. So the next time you are using expect from @playwright/test, just know that you have been using the expect library from Jest.

There are tons of playwright assertions readily available at your disposal. An entire list can be found here on the official website of Playwright.

It is advisable to use auto-retrying assertions since they have an auto-retrying mechanism built-in that waits for the element to be attached, stable, or visible based on the respective actionability based on the action called. Here’s a guide on auto-waiting.

Note: This tutorial is on how to compare two arrays for equality. It assumes that you have already installed Playwright and have imported expect from @playwright/test like this:

import { expect } from "@playwright/test"

Compare two arrays for Equality in Playwright (Order Specific)

In Playwright, if you wish to compare two arrays for equality, what would you do. Use this guy right?

import { test, expect } from "@playwright/test"

test('random test case 1', ()=>{
const s = ["ram", "krishna"]
const y = ["ram", "krishna"]
expect(s).toEqual(y)
})

Running the above test will pass your test since the arrays are equal.

Well, this was easy, right?

But what if the orders are different? What if you want the arrays to be still equal irrespective of the order?

If the arrays had a different order meaning something like this:

const s = ["ram", "krishna"]
const y = ["krishna", "ram"]

and you try to still use the

expect(s).toEqual(y)

logic, that won’t work.

Let’s see by executing this.

As you can see, our OG equality logic didn’t work here. Well, then what do we need to do?

Don’t worry coz Playwright provides another great way to do that. Here’s how:

How do you compare two arrays for Equality irrespective of the order in Playwright

We have to use the arrayContaining logic here.

So instead of expect(value1).toEqual(value2) we are going to be using:

expect(value1).toEqual(expect.arrayContaining(value2)) logic here.

Remember we need to add another expect in the second block.

So our code will become like:

const s = ["ram", "krishna"]
const y = ["krishna", "ram"]

expect(s).toEqual(expect.arrayContaining(y))

Go ahead and execute it and check for yourself.

As you can see this has passed now.

The above logic can also be used to verify if an array element is present in the previous array.

For e.g. let’s say the second array didn’t have one of the elements:

const s = ["ram", "krishna"]
const y = ["krishna"]

If we do:

expect(s).toEqual(expect.arrayContaining(y))

again, our code will verify if array element krishna is present in s array. Which it is right?

Go ahead and run the test and see for yourself.

As you can see in the above image, it has passed.

So remember to use arrayContaining for assertions when you want to verify array elements’ equality or whether they are present in a given array or not.

Hope you liked this quick How to Compare two arrays for Equality irrespective of their order in Playwright tutorial.