'How to check if an element exists on the page in Playwright.js

I am using playwright.js to write a script for https://target.com, and on the page where you submit shipping information, it will provide the option to use a saved address if you have gone through the checkout process previously on that target account.

I would like to enter fresh shipping information every time I run the script, so I must have playwright click delete if it exists on the page, and then enter the shipping information.

The function that is shown below works to click delete, but then it times out at if (await page.$$("text='Delete'") != []) rather than executing the else part of the function.

How can I rewrite this function so that it simply checks if the element (selector: text='Delete') exists, and clicks it if it does, and executes the filling part of the function if it doesn't?

  async function deliveryAddress() {
    if (await page.$$("text='Delete'") != []) {
      await page.click("text='Delete'", {force:true})
      await deliveryAddress()
    } else {
      await page.focus('input#full_name')
      await page.type('input#full_name', fullName, {delay: delayms});
      await page.focus('input#address_line1')
      await page.type('input#address_line1', address, {delay: delayms});
      await page.focus('input#zip_code')
      await page.type('input#zip_code', zipCode, {delay: delayms});
      await page.focus('input#mobile')
      await page.type('input#mobile', phoneNumber, {delay: delayms});
      await page.click("text='Save & continue'", {force:true})
    }
  }

Solution 1:^[1]

You have two main options:

const deletes = await page.$$("text='Delete'");
if (deletes) {
    // ...
}

const deletes = await page.$$("text='Delete'");
if (deletes.length) {
    // ...
}

I'd personally leave the $$ command outside the if statement for readability, but that might me only me.

It also seems you have only one element with attribute text with value "Delete" on the page since you're not doing anything with the array that $$ returns. If so, you might use $:

const del = await page.$("text='Delete'");
if (del) {
    // ...
}

Solution 2:^[2]

await expect(page.locator(".MyClass")).toHaveCount(0)

Solution 3:^[3]

try {
  await page.waitForSelector(selector, { timeout: 5000 })
  // ...`enter code here`
} catch (error) {`enter code here`
  console.log("The element didn't appear.")
}

from - https://github.com/puppeteer/puppeteer/issues/1149#issuecomment-434302298

Solution 4:^[4]

await page.isVisible("text='Delete'")

maybe this is the one you're looking for.

Solution 5:^[5]

await expect(page).toHaveSelectorCount('.floorNav__modal', 1);

Solution 6:^[6]

Usualy this can help in lot of situations, when checking element presence.

if(await page.locator(your_selector).count()>0)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	pavelsaman
Solution 2	Victorio Berra
Solution 3	Raghu
Solution 4	Christian Paul Añasco
Solution 5	sunkehappy
Solution 6

'How to check if an element exists on the page in Playwright.js

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]