问题
我用“木偶”测试特定网站。在大多数情况下，它似乎工作得很好，但它报告了几个地方：

下面的代码选择在任何一种情况下都不在屏幕上的链接。

第一个链接工作正常，而第二个链接失败。

有什么区别？

两个链接都没有出现在屏幕上。

谢谢你的帮助，

干杯，：）

1. const puppeteer = require('puppeteer');
   
2. 
   
3. const initialPage = 'https://statsregnskapet.dfo.no/departementer';
   
4. const selectors = [
   
5.     'div[id$="-bVMpYP"] article a',
   
6.     'div[id$="-KcazEUq"] article a'
   
7. ];
   
8. 
   
9. (async () => {
   
10.     let selector, handles, handle;
    
11.     const width=1024, height=1600;
    
12.     const browser = await puppeteer.launch({
    
13.         headless: false,
    
14.         defaultViewport: { width, height }
    
15.     });
    
16.     const page = await browser.newPage();
    
17.     await page.setViewport({ width, height});
    
18.     page.setUserAgent('UA-TEST');
    
19. 
    
20.     // Load first page
    
21.     let stat = await page.goto(initialPage, { waitUntil: 'domcontentloaded'});
    
22. 
    
23.     // Click on selector 1 - works ok
    
24.     selector = selectors[0];
    
25.     await page.waitForSelector(selector);
    
26.     handles = await page.$$(selector);
    
27.     handle = handles[12]
    
28.     console.log('Clicking on: ', await page.evaluate(el => el.href, handle));
    
29.     await handle.click();  // OK
    
30. 
    
31.     // Click that selector 2 - fails
    
32.     selector = selectors[1];
    
33.     await page.waitForSelector(selector);
    
34.     handles = await page.$$(selector);
    
35.     handle = handles[12]
    
36.     console.log('Clicking on: ', await page.evaluate(el => el.href, handle));
    
37.     await handle.click();  // Error: Node is either not visible or not an HTMLElement
    
38. 
    
39. })();

复制代码

我试图模拟真实用户在网站周围点击的行为，这就是我使用 .click() 而不是 .goto() 的原因，因为 a 标签有一个 onclick 事件.

回答
首先，传递给 defaultViewport 的 puppeteer.launch() 对象没有键，只有值。

您需要将其更改为：

'默认视口' : { '宽度' ：宽度，'高度' ： 高度 }

传递给 page.setViewport() 的对象也是如此。

您需要将这行代码更改为：

等待 page.setViewport( { 'width' : 宽度, 'height' : 高度 } );

第三，函数 page.setUserAgent() 返回一个 promise ，所以你需要等待这个函数：

等待 page.setUserAgent('UA-TEST');

此外，您忘记在句柄 = 句柄 [12] 之后添加分号。

您应该将其更改为：

句柄 = 句柄 [12];

此外，单击第一个链接后，您无需等待导航完成（ page.waitForNavigation() ）。

单击第一个链接后，应添加：

等待页面.waitForNavigation();

我注意到第二页有时会挂在导航上，因此您可能会发现增加默认导航超时（ page.setDefaultNavigationTimeout() ）很有用：

page.setDefaultNavigationTimeout(90000);

同样，您忘记在句柄 = 句柄 [12] 之后添加分号，因此需要将其更改为：

句柄 = 句柄 [12];

请务必注意，您在单击的第二个链接中使用了错误的选择器。

原来的选择器试图选择只有xs超小屏（手机）才能看到的元素。

您需要收集一组对您指定的视口可见的链接。

因此，您需要将第二个选择器更改为：

div[id$=“-KcazEUq”] 文章 .dfo-widget-sm a

单击第二个链接后，您还应该等待导航完成：

等待页面.waitForNavigation();

最后，您可能还想在程序完成后关闭浏览器（ browser.close() ）：

等待浏览器.close();

未处理的拒绝

这是最终的解决方案：

1. 'use strict';
   
2. 
   
3. const puppeteer = require( 'puppeteer' );
   
4. 
   
5. const initialPage = 'https://statsregnskapet.dfo.no/departementer';
   
6. 
   
7. const selectors = [
   
8.     'div[id$="-bVMpYP"] article a',
   
9.     'div[id$="-KcazEUq"] article .dfo-widget-sm a'
   
10. ];
    
11. 
    
12. ( async () =>
    
13. {
    
14.     let selector;
    
15.     let handles;
    
16.     let handle;
    
17. 
    
18.     const width = 1024;
    
19.     const height = 1600;
    
20. 
    
21.     const browser = await puppeteer.launch(
    
22.     {
    
23.         'defaultViewport' : { 'width' : width, 'height' : height }
    
24.     });
    
25. 
    
26.     const page = await browser.newPage();
    
27. 
    
28.     page.setDefaultNavigationTimeout( 90000 );
    
29. 
    
30.     await page.setViewport( { 'width' : width, 'height' : height } );
    
31. 
    
32.     await page.setUserAgent( 'UA-TEST' );
    
33. 
    
34.     // Load first page
    
35. 
    
36.     let stat = await page.goto( initialPage, { 'waitUntil' : 'domcontentloaded' } );
    
37. 
    
38.     // Click on selector 1 - works ok
    
39. 
    
40.     selector = selectors[0];
    
41.     await page.waitForSelector( selector );
    
42.     handles = await page.$$( selector );
    
43.     handle = handles[12];
    
44.     console.log( 'Clicking on: ', await page.evaluate( el => el.href, handle ) );
    
45.     await handle.click();  // OK
    
46. 
    
47.     await page.waitForNavigation();
    
48. 
    
49.     // Click that selector 2 - fails
    
50. 
    
51.     selector = selectors[1];
    
52.     await page.waitForSelector( selector );
    
53.     handles = await page.$$( selector );
    
54.     handle = handles[12];
    
55.     console.log( 'Clicking on: ', await page.evaluate( el => el.href, handle ) );
    
56.     await handle.click();
    
57. 
    
58.     await page.waitForNavigation();
    
59. 
    
60.     await browser.close();
    
61. })();

复制代码

问题
我用“木偶”测试特定网站。在大多数情况下，它似乎工作得很好，但它报告了几个地方：

下面的代码选择在任何一种情况下都不在屏幕上的链接。

第一个链接工作正常，而第二个链接失败。

有什么区别？

两个链接都没有出现在屏幕上。

谢谢你的帮助，

干杯，：）

1. const puppeteer = require('puppeteer');
   
2. 
   
3. const initialPage = 'https://statsregnskapet.dfo.no/departementer';
   
4. const selectors = [
   
5.     'div[id$="-bVMpYP"] article a',
   
6.     'div[id$="-KcazEUq"] article a'
   
7. ];
   
8. 
   
9. (async () => {
   
10.     let selector, handles, handle;
    
11.     const width=1024, height=1600;
    
12.     const browser = await puppeteer.launch({
    
13.         headless: false,
    
14.         defaultViewport: { width, height }
    
15.     });
    
16.     const page = await browser.newPage();
    
17.     await page.setViewport({ width, height});
    
18.     page.setUserAgent('UA-TEST');
    
19. 
    
20.     // Load first page
    
21.     let stat = await page.goto(initialPage, { waitUntil: 'domcontentloaded'});
    
22. 
    
23.     // Click on selector 1 - works ok
    
24.     selector = selectors[0];
    
25.     await page.waitForSelector(selector);
    
26.     handles = await page.$$(selector);
    
27.     handle = handles[12]
    
28.     console.log('Clicking on: ', await page.evaluate(el => el.href, handle));
    
29.     await handle.click();  // OK
    
30. 
    
31.     // Click that selector 2 - fails
    
32.     selector = selectors[1];
    
33.     await page.waitForSelector(selector);
    
34.     handles = await page.$$(selector);
    
35.     handle = handles[12]
    
36.     console.log('Clicking on: ', await page.evaluate(el => el.href, handle));
    
37.     await handle.click();  // Error: Node is either not visible or not an HTMLElement
    
38. 
    
39. })();

复制代码

我试图模拟真实用户在网站周围点击的行为，这就是我使用 .click() 而不是 .goto() 的原因，因为 a 标签有一个 onclick 事件.

回答
首先，传递给 defaultViewport 的 puppeteer.launch() 对象没有键，只有值。

您需要将其更改为：

'默认视口' : { '宽度' ：宽度，'高度' ： 高度 }

传递给 page.setViewport() 的对象也是如此。

您需要将这行代码更改为：

等待 page.setViewport( { 'width' : 宽度, 'height' : 高度 } );

第三，函数 page.setUserAgent() 返回一个 promise ，所以你需要等待这个函数：

等待 page.setUserAgent('UA-TEST');

此外，您忘记在句柄 = 句柄 [12] 之后添加分号。

您应该将其更改为：

句柄 = 句柄 [12];

此外，单击第一个链接后，您无需等待导航完成（ page.waitForNavigation() ）。

单击第一个链接后，应添加：

等待页面.waitForNavigation();

我注意到第二页有时会挂在导航上，因此您可能会发现增加默认导航超时（ page.setDefaultNavigationTimeout() ）很有用：

page.setDefaultNavigationTimeout(90000);

同样，您忘记在句柄 = 句柄 [12] 之后添加分号，因此需要将其更改为：

句柄 = 句柄 [12];

请务必注意，您在单击的第二个链接中使用了错误的选择器。

原来的选择器试图选择只有xs超小屏（手机）才能看到的元素。

您需要收集一组对您指定的视口可见的链接。

因此，您需要将第二个选择器更改为：

div[id$=“-KcazEUq”] 文章 .dfo-widget-sm a

单击第二个链接后，您还应该等待导航完成：

等待页面.waitForNavigation();

最后，您可能还想在程序完成后关闭浏览器（ browser.close() ）：

等待浏览器.close();

未处理的拒绝

这是最终的解决方案：

1. 'use strict';
   
2. 
   
3. const puppeteer = require( 'puppeteer' );
   
4. 
   
5. const initialPage = 'https://statsregnskapet.dfo.no/departementer';
   
6. 
   
7. const selectors = [
   
8.     'div[id$="-bVMpYP"] article a',
   
9.     'div[id$="-KcazEUq"] article .dfo-widget-sm a'
   
10. ];
    
11. 
    
12. ( async () =>
    
13. {
    
14.     let selector;
    
15.     let handles;
    
16.     let handle;
    
17. 
    
18.     const width = 1024;
    
19.     const height = 1600;
    
20. 
    
21.     const browser = await puppeteer.launch(
    
22.     {
    
23.         'defaultViewport' : { 'width' : width, 'height' : height }
    
24.     });
    
25. 
    
26.     const page = await browser.newPage();
    
27. 
    
28.     page.setDefaultNavigationTimeout( 90000 );
    
29. 
    
30.     await page.setViewport( { 'width' : width, 'height' : height } );
    
31. 
    
32.     await page.setUserAgent( 'UA-TEST' );
    
33. 
    
34.     // Load first page
    
35. 
    
36.     let stat = await page.goto( initialPage, { 'waitUntil' : 'domcontentloaded' } );
    
37. 
    
38.     // Click on selector 1 - works ok
    
39. 
    
40.     selector = selectors[0];
    
41.     await page.waitForSelector( selector );
    
42.     handles = await page.$$( selector );
    
43.     handle = handles[12];
    
44.     console.log( 'Clicking on: ', await page.evaluate( el => el.href, handle ) );
    
45.     await handle.click();  // OK
    
46. 
    
47.     await page.waitForNavigation();
    
48. 
    
49.     // Click that selector 2 - fails
    
50. 
    
51.     selector = selectors[1];
    
52.     await page.waitForSelector( selector );
    
53.     handles = await page.$$( selector );
    
54.     handle = handles[12];
    
55.     console.log( 'Clicking on: ', await page.evaluate( el => el.href, handle ) );
    
56.     await handle.click();
    
57. 
    
58.     await page.waitForNavigation();
    
59. 
    
60.     await browser.close();
    
61. })();

复制代码