HomeGuides & tutorialsAPI reference
Back to Phantombuster.com →

waitUntilVisible()

waitUntilVisible(selectors [, timeout, condition, callback])

Waits for a list of selectors CSS selectors to be visible.
Aborts with an error if the elements have not become visible after timeout milliseconds.

const selectors = "#header > h1.big-title"
const pageTimeout = 5000

try {
  await tab.waitUntilVisible(selectors, pageTimeout)
  // Manipulate the element here
  // for example with a click() or evaluate()
} catch(err) {
  console.log("Oh no! Even after 5s, the element was still not visible:", err)
}

const selectors = "#header > h1.big-title"
const pageTimeout = 5000

tab.waitUntilVisible(selectors, pageTimeout)
.then(() => {
  // Manipulate the element here
  // For example with a click() or evaluate()
})
.catch((err, selector) => {
  console.log("Oh no! Even after 5s, the element was still not visible:", err)
  console.log("This element is not visible:", selector)
})

var selectors = "#header > h1.big-title"
var pageTimeout = 5000

tab.waitUntilVisible(selectors, pageTimeout, function(err, selector) {
  if (err) {
    console.log("Oh no! Even after 5s, the element was still not visible:", err)
    console.log("This element is not visible:", selector)
  } else {
    // Manipulate the element here
    // For example with a click() or evaluate()
  }
})

const selectors = ["#header > h1", "img.product-image"]
const pageTimeout = 6000

try {
  await tab.waitUntilVisible(selectors, pageTimeout)
  // Manipulate the element here
  // for example with a click() or evaluate()
} catch(err) {
  console.log("Oh no! Even after 6s, at least one of the element was still not visible:", err)
}

const selectors = ["#header > h1", "img.product-image"]
const pageTimeout = 6000

tab.waitUntilVisible(selectors, pageTimeout)
.then(() => {
  // Manipulate the element here
  // For example with a click() or evaluate()
})
.catch((err, selector) => {
  console.log("Oh no! Even after 6s, at least one of the element was still not visible:", err)
    console.log("This element is not visible:", selector)
})

var selectors = ["#header > h1", "img.product-image"]
var pageTimeout = 6000

tab.waitUntilVisible(selectors, pageTimeout, "and", function(err, selector) {
  if (err) {
    console.log("Oh no! Even after 6s, at least one of the element was still not visible:", err)
    console.log("This element is not visible:", selector)
  } else {
    // Manipulate the element here
    // For example with a click() or evaluate()
  }
})

var selectors = ["section.footer", "section.header"]
var pageTimeout = 7000

try {
  const selector = await tab.waitUntilVisible(selectors, pageTimeout)
  console.log("This element is visible: " + selector)
  // Manipulate the element here
  // For example with a click() or evaluate()
} catch(err) {
  console.log("Oh no! Even after 7s, all the elements were still not visible. " + err)
  // in this case, the callback does not return which element is not visible
  // because ALL the elements are not visible
}

var selectors = ["section.footer", "section.header"]
var pageTimeout = 7000

tab.waitUntilVisible(selectors, pageTimeout)
.then((selector) => {
  console.log("This element is visible: " + selector)
  // Manipulate the element here
  // For example with a click() or evaluate()
})
.catch((err) => {
  console.log("Oh no! Even after 7s, all the elements were still not visible:", err)
  // in this case, the callback does not return which element is not visible
  // because ALL the elements are not visible
})

var selectors = ["section.footer", "section.header"]
var pageTimeout = 7000

tab.waitUntilVisible(selectors, pageTimeout, "or", function(err, selector) {
  if (err) {
    console.log("Oh no! Even after 7s, all the elements were still not visible:", err)
    // in this case, the callback does not return which element is not visible
    // because ALL the elements are not visible
  } else {
    console.log("This element is visible:", selector)
    // Manipulate the element here
    // For example with a click() or evaluate()
  }
})

selectors can be an array of CSS selectors (array of strings) or a single CSS selector (string).

By default, condition is "and" (wait for all CSS selectors) but it can be changed to "or" (wait for any CSS selector).

— selectors (Array or String)

What to wait for. Can be an array of CSS selectors (array of strings) or a single CSS selector (string).

— timeout (Number)

Maximum number of milliseconds to wait for, by default it is set to 5000(optional).
callback will be called with an error if the elements have not become visible after timeout milliseconds.

— [condition] (String)

When selectors is an array, this optional argument lets you choose how to wait for the CSS selectors(optional).
If condition is "and" (the default), the method will wait for all CSS selectors.
On the other hand, if condition is "or", the method will wait for any CSS selector.

— callback (Function(err, selector))

Function called when finished(optional).

  • err (String): null or a description of what went wrong if the CSS selectors were not visible after timeout milliseconds
  • selector (String):
    • In case of success (err is null):
      • If condition was "and" then selector is null because all CSS selectors are visible
      • If condition was "or" then selector is one of the visible CSS selectors of the given array
    • In case of failure (err is not null):
      • If condition was "and" then selector is one of the non-visible CSS selectors of the given array
      • If condition was "or" then selector is null because none of the CSS selectors are visible