API problem solving -- using powerful "eval" functions

First, let's take a look at the explanation of the Chinese API:


I explained more. The official and Chinese versions of the API have been very detailed,
Next, I will introduce the common functions of the previous example:
Create a new eval HTML

<!DOCTYPE html>
<html>
<head>
    <title>eval-demo</title>
</head>
<body>
    <input type="text" value="First input" id="input_01">
    <input type="text" value="Second input" id="input_02">
    <a href="https://www.baidu.com/" style="padding-left: 50px" id="click">Click to enter Baidu</a>
    <hr>
    <div id="div_text"  style="height: 200px;width: 150px;overflow: auto;" >
        <p>
                    page.$eval(selector, pageFunction[, ...args])
        selector <string> One selector Query page page
        pageFunction <function> Evaluate function in browser context
        ...args <...Serializable|JSHandle> Pass to pageFunction Parameters for
        returns: <Promise<Serializable>> Promise Resolve to pageFunction Return value of
        This method runs within the page document.querySelector,And pass it as the first parameter to pageFunction.  If not selector The method raises an error.
        If pageFunction Return one Promise,that page.$eval Will wait for the commitment to resolve and return its value.
        Examples:
        </p>
    </div>
</body>
</html>

New demo JS file

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({headless:false});
  const page = await browser.newPage();
  //goto Remember to change the website into your own
  await page.goto('file:///MAC/Study/27.Puppeteer/case/eval.html');

  // Click element
  await page.waitFor(3000);
  await page.$eval('#click',a => a.click() );
  await page.waitFor(2000);
  await page.goBack();
  //Clear the value of the input box
  await page.$eval('#input_01',input => input.value='' );
  // Clear the value of the input box and enter a new value
  await page.$eval('#Input_ 02', input = > input Value='clear the original value and enter a new' );
  // Get text between labels
  const a_text = await page.$eval('#click',a => a.innerText );
  console.log(a_text);
  // Get the attribute value inside the tag
  const div_text = await page.$eval('#div_text',div => div.id );//obtain div label id Value of
  console.log(div_text);
  const a_link = await page.$eval('#click',a => a.href );//obtain a label href Value of
  console.log(a_link);
  const input_value = await page.$eval('#input_02',input => input.value );//obtain input label value Value of
  console.log(input_value);
  // Get the whole HTML All contents of the label
  const html = await page.$eval('#input_02',input => input.outerHTML );//obtain input label value Value of
  console.log(html);

  // move div Embedded scroll bar, multiple ways
  // 1,Can move left and right and up and down at the same time,The first parameter is the value that controls the left-right movement, and the second parameter is the value that controls the up-down movement
  await page.$eval('#div_text',div => div.scrollTo(1000,1000) );
  // 2,Up and down only and left and right only
  await page.waitFor(2000);
  await page.$eval('#div_text',div => div.scrollTop=10 );//Move up and down
  await page.$eval('#div_text',div => div.scrollLeft=10 );//Move left and right

  //Remove the properties of a label
  await page.$eval('#div_text',div => div.removeAttribute('id') );//remove div in id Value of
  // Change the value of an attribute in a label
  await page.$eval('#input_02',div => div.setAttribute('value','test') );//change div in class Value of
  // If the tag does not have this attribute, this attribute will be added
  await page.$eval('#input_02',div => div.setAttribute('class','test') );//change div in class Value of

  // Wait 3 seconds to exit the browser
  await page.waitFor(3000);
  await browser.close();
})();

OK, the script and html file have been created. Run it yourself to see the effect. Then start the analysis:

1. Click the element. This seems useless. The puppeter comes with the tap() and click() functions

  // Click element
  await page.waitFor(3000);
  await page.$eval('#click',a => a.click() );

2. Clear the value of the input box. The type() function in the puppeter does not clear the input. Sometimes it is useful to clear a text for input.

  //Clear the value of the input box
  await page.$eval('#input_01',input => input.value='' );

3. Clear the input box and enter a new value. The syntax is the same as the second one, except that the value to be entered is added after the value

  // Clear the value of the input box and enter a new value
  await page.$eval('#Input_ 02', input = > input Value='clear the original value and enter a new');

4. UI automation interrupt needs to get the text of the page for comparison to determine whether it passes. It seems that there is no function to get the text in the framework

  // Get text between labels
 const a_text = await page.$eval('#click',a => a.innerText );
 console.log(a_text);//Print out text

5. Get the attribute value inside the tag, if you want to use it

  // Get the attribute value inside the tag
const div_text = await page.$eval('#div_text',div => div.id );//obtain div label id Value of
console.log(div_text);
const a_link = await page.$eval('#click',a => a.href );//obtain a label href Value of
console.log(a_link);
const input_value = await page.$eval('#input_02',input => input.value );//obtain input label value Value of
console.log(input_value);

6. Get all the contents of the entire HTML tag

  // Get the whole HTML All contents of the label
const html = await page.$eval('#input_02',input => input.outerHTML );//obtain input label value Value of
console.log(html);

7. Move the div embedded scroll bar. Many elements can only be displayed and operated by moving the scroll bar. At this time, it will come in handy. The first of the three moving methods is the most commonly used

  // move div Embedded scroll bar, multiple ways
// 1,Can move left and right and up and down at the same time,The first parameter is the value that controls the left-right movement, and the second parameter is the value that controls the up-down movement
await page.$eval('#div_text',div => div.scrollTo(1000,1000) );
// 2,Up and down only and left and right only
await page.waitFor(2000);
await page.$eval('#div_text',div => div.scrollTop=10 );//Move up and down
await page.$eval('#div_text',div => div.scrollLeft=10 );//Move left and right
8. The seventh one is a div embedded scroll bar, but sometimes the scroll bar is full page, not a label. At this time, you can't use the above function. You need another function evaluate(), which rewrites a Baidu script with the same parameters as the seventh one. You can try to run it yourself
const puppeteer = require('puppeteer');

(async () => {
const browser = await puppeteer.launch({headless:false});
const page = await browser.newPage();
await page.goto('https://www.baidu.com/');
await page.setViewport({height:400,width:500});//Set to small window mode
// 1,Can move left and right and up and down at the same time,The first parameter is the value that controls the left-right movement, and the second parameter is the value that controls the up-down movement
await page.waitFor(2000);
await page.evaluate(() => window.scrollTo(1000,1000) );
//Wait 3 seconds to exit the browser
await page.waitFor(2000);
await browser.close();
})();

9. Attribute of operation tag: remove, modify, add

  //Remove the properties of a label
  await page.$eval('#div_text',div => div.removeAttribute('id') );//remove div in id Value of
  // Change the value of an attribute in a label
  await page.$eval('#input_02',div => div.setAttribute('value','test') );//change div in class Value of
  // If the tag does not have this attribute, this attribute will be added
  await page.$eval('#input_02',div => div.setAttribute('class','test') );//position input Label addition class Properties and values of

These are the ones that are often used now. Of course, if you want to use other ones, you can learn about them. I won't introduce them more here

Address: open Google's F12 developer mode and enter the console to view more operations. You can see all API s.

 

 

See more

Puppeter learning notes

Tags: puppeteer

Posted by eroticheretic on Mon, 30 May 2022 06:00:08 +0530