node.js – NodeJS中的Puppeteer报告’错误：节点不可见或不是HTMLElement’

我正在使用’puppeteer’为NodeJS测试一个特定的网站.它似乎在大多数情况下工作正常,但有些地方报道：

Error: Node is either not visible or not an HTMLElement@H_301_4@

以下代码选择了两种情况下都不在屏幕上的链接.@H_301_4@

第一个链接工作正常,而第二个链接失败.@H_301_4@

有什么不同？
两个链接都在屏幕外.@H_301_4@

任何帮助,赞赏,
干杯,:)@H_301_4@

const puppeteer = require('puppeteer');

const initialPage = 'https://statsregnskapet.dfo.no/departementer';
const selectors = [
    'div[id$="-bVMpYP"] article a','div[id$="-KcazEUq"] article a'
];

(async () => {
    let selector,handles,handle;
    const width=1024,height=1600;
    const browser = await puppeteer.launch({ 
        headless: false,defaultViewport: { width,height } 
    });
    const page = await browser.newPage();
    await page.setViewport({ width,height});
    page.setUserAgent('UA-TEST');

    // Load first page
    let stat = await page.goto(initialPage,{ waitUntil: 'domcontentloaded'});

    // Click on selector 1 - works ok
    selector = selectors[0];
    await page.waitForSelector(selector);
    handles = await page.$$(selector);
    handle = handles[12]
    console.log('Clicking on: ',await page.evaluate(el => el.href,handle));
    await handle.click();  // OK

    // Click that selector 2 - fails
    selector = selectors[1];
    await page.waitForSelector(selector);
    handles = await page.$$(selector);
    handle = handles[12]
    console.log('Clicking on: ',handle));
    await handle.click();  // Error: Node is either not visible or not an HTMLElement

})();

我试图模仿真实用户点击网站的行为,这就是我使用.click()而不是.goto()的原因,因为a标签有onclick事件.@H_301_4@

解决方法

首先,传递给 puppeteer.launch()的defaultViewport对象没有键,只有值.

您需要将其更改为：@H_301_4@

'defaultViewport' : { 'width' : width,'height' : height }

对于传递给page.setViewport()的对象也是如此.@H_301_4@

您需要将此行代码更改为：@H_301_4@

await page.setViewport( { 'width' : width,'height' : height } );

三,函数 page.setUserAgent()返回promise,所以你需要await这个函数：@H_301_4@

await page.setUserAgent( 'UA-TEST' );

此外,你忘了在handle = handles [12]之后添加一个分号.@H_301_4@

你应该改为：@H_301_4@

handle = handles[12];

此外,您不是在点击第一个链接后等待导航完成(page.waitForNavigation()).@H_301_4@

点击第一个链接后,您应该添加：@H_301_4@

await page.waitForNavigation();

我注意到第二页有时会挂起导航,因此您可能会发现增加默认导航超时(page.setDefaultNavigationTimeout())很有用：@H_301_4@

page.setDefaultNavigationTimeout( 90000 );

再一次,你忘了在handle = handles [12]之后添加一个分号,所以这需要改为：@H_301_4@

handle = handles[12];

请务必注意,您正在使用错误的选择器来处理您单击的第二个链接.@H_301_4@

您的原始选择器试图选择仅对xs超小屏幕(手机)可见的元素.@H_301_4@

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

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

div[id$="-KcazEUq"] article .dfo-widget-sm a

您还应该在点击第二个链接后等待导航完成：@H_301_4@

await page.waitForNavigation();

最后,您可能还想在完成程序后关闭浏览器(browser.close())：@H_301_4@

await browser.close();

Note: You might also want to look into 07008.@H_301_4@

这是最终的解决方案：@H_301_4@

'use strict';

const puppeteer = require( 'puppeteer' );

const initialPage = 'https://statsregnskapet.dfo.no/departementer';

const selectors = [
    'div[id$="-bVMpYP"] article a','div[id$="-KcazEUq"] article .dfo-widget-sm a'
];

( async () =>
{
    let selector;
    let handles;
    let handle;

    const width = 1024;
    const height = 1600;

    const browser = await puppeteer.launch(
    {
        'defaultViewport' : { 'width' : width,'height' : height }
    });

    const page = await browser.newPage();

    page.setDefaultNavigationTimeout( 90000 );

    await page.setViewport( { 'width' : width,'height' : height } );

    await page.setUserAgent( 'UA-TEST' );

    // Load first page

    let stat = await page.goto( initialPage,{ 'waitUntil' : 'domcontentloaded' } );

    // Click on selector 1 - works ok

    selector = selectors[0];
    await page.waitForSelector( selector );
    handles = await page.$$( selector );
    handle = handles[12];
    console.log( 'Clicking on: ',await page.evaluate( el => el.href,handle ) );
    await handle.click();  // OK

    await page.waitForNavigation();

    // Click that selector 2 - fails

    selector = selectors[1];
    await page.waitForSelector( selector );
    handles = await page.$$( selector );
    handle = handles[12];
    console.log( 'Clicking on: ',handle ) );
    await handle.click();

    await page.waitForNavigation();

    await browser.close();
})();

node.js – NodeJS中的Puppeteer报告’错误：节点不可见或不是HTMLElement’

解决方法

猜你在找的Node.js相关文章