How can I locate an element which was created with Javascript and is not present in the document.body?

Question

I have an application which plays audios and I am writing some tests for it using Cypress.

The thing is that the audio tags for the audios are created using Javascript, new Audio() , and I am having trouble querying these audio tags.

When I add an element, such as an audio tag, using standard HTML, I can find it in the document.body .

Now, how can I locate an element, which was created using Javascript, such as new Audio() ?

Answer 1

If the elements you seek are truly outside of <body> (which is possible but not common), then this code can find them

cy.document()
  .find('body')
  .next()        // sibling element to <body> 
  .should('have.text', 'created in javascript script')   // verifies in my example

Or use <html> as the base element ( <body> is the default base element)

cy.document()
  .find('html')
  .contains('div', 'created in javascript script')

This is the DOM I tested on - the bottom <div> is added after <body> when the page loads.

<html>

<head></head>

<body>
  <div>Normal Html element</div>
</body>

<div>created in javascript script</div>

</html>

How can I locate an element which was created with Javascript and is not present in the document.body?

Question

1 answers

solution1
2 2023-01-04 07:22:29

How can I locate an element which was created with Javascript and is not present in the document.body?

Question

1 answers

solution1 2 2023-01-04 07:22:29

solution1
2 2023-01-04 07:22:29