Extracting text from a tag within an iframe with Puppeteer

问题

I'm having some difficulties extracting text from within an iframe.

Given the code:

<iframe id="iframe" src="https://myamazingapp/2637374848489595" 
style="width:100%;border:none" height="858px" css="1"></iframe>
<div id="document">
   <html lang ="en">
      <head>...</head>
     <body onLoad="resize();">
         <div>class = "app">
             <div class = my-response">
             <div class="my-response__iconcontainer>..
        </div>
        <div class="my-response__copy">
           <p>Thank you for filling out my form</p>
        </div>
     </div>
</div>//....other members

My snippet of Puppeteer is as follows:

  const frame = page.frames().find(frame => frame.name() === 'iframe');
  await frame.$('body > div > div > div > div.my-response__copy > p');
  const text = page.evaluate(el => el.innerHTML, await page.$('body > div > div > div > div.my-response__copy > p'));
  expect(text).to.equal('Thank you for filling out my form');

The stacktrace starts as:

 { AssertionError: expected {} to equal 'Thank you for filling out my form.'
at changeOptions (/Users/firstname.lastname/Documents/projects/qa-tests/tests/widget/fillform.js:49:25)
at process._tickCallback (internal/process/next_tick.js:68:7)
message:
 'expected {} to equal \'Thank you for filling out my form\'',
 showDiff: true,
 actual: Promise { <pending> },
 expected: 'Thank you for filling out my form' }

Any ideas how to extract the text so I can assert against it?

Thanks

回答1:

page.evaluate() returns a Promise.

returns: <Promise<Serializable>> Promise which resolves to the return value of pageFunction

To be honest the message contains an indication of that:

actual: Promise { <pending> },

So use await on the result somewhere:

const text = await page.evaluate(el => el.innerHTML, await page.$('body > div > div > div > div.my-response__copy > p'));
expect(text).to.equal('Thank you for filling out my form');

const text = page.evaluate(el => el.innerHTML, await page.$('body > div > div > div > div.my-response__copy > p'));
expect(await text).to.equal('Thank you for filling out my form');

I would prefer the first one. Also, I have an impression that in return, the await inside the page.evaluate might not be necessary.

回答2:

You can get the content from the iframe and use cheerio to traverse over the elements and get the text / html or any other stuff you want.

Example:

const frame = page.frames().find(frame => frame.name() === 'iframe');
const content = await frame.content();
const $ = cheerio.load(content);
const p = $('p').text();
// the text of p
console.log(p);

来源：https://stackoverflow.com/questions/53101483/extracting-text-from-a-p-tag-within-an-iframe-with-puppeteer

标签

javascript

Puppeteer

Extracting text from a <p> tag within an iframe with Puppeteer

问题

回答1:

回答2: