如何封装含await page.click等的代码为函数并调用？

你在主代码中多次重复使用这段异步操作代码：

(async() => {
// 其他业务代码

try {
        await page.waitForSelector('.css123', {timeout: 5000});
    } catch (e) {
        console.log(error);
    }
    
    try {
        await page.click('.css123');
    } catch (e) {
        console.log(error);
    }

// 其他业务代码
})();

正确的函数封装与调用方式 #

这段代码依赖Puppeteer的page页面对象，必须将page作为参数传入函数，同时函数需声明为异步类型：

方式1：箭头函数声明

// 封装可复用函数，支持自定义选择器和超时时间
const handleElementClick = async (page, selector = '.css123', timeout = 5000) => {
    try {
        await page.waitForSelector(selector, { timeout });
    } catch (e) {
        console.log('等待选择器超时/失败:', e);
    }
    
    try {
        await page.click(selector);
    } catch (e) {
        console.log('点击元素失败:', e);
    }
};

方式2：普通异步函数声明

// 同样支持自定义参数的普通函数写法
async function handleElementClick(page, selector = '.css123', timeout = 5000) {
    try {
        await page.waitForSelector(selector, { timeout });
    } catch (e) {
        console.log('等待选择器超时/失败:', e);
    }
    
    try {
        await page.click(selector);
    } catch (e) {
        console.log('点击元素失败:', e);
    }
}

在主代码中调用

在异步上下文（比如你的自执行异步函数）中，传入page对象即可调用：

(async() => {
    // 假设已完成page对象的初始化
    // 调用封装好的函数，使用默认选择器和超时
    await handleElementClick(page);
    
    // 如需操作其他元素，可传入自定义参数
    await handleElementClick(page, '.another-selector', 8000);
    
    // 其他业务代码
})();

之前失败的核心原因 #

你之前尝试的两种函数写法无法工作，本质是没有将依赖的page对象作为参数传入函数，导致函数内部无法访问page实例，自然无法执行waitForSelector和click方法。

内容的提问来源于stack exchange，提问作者issik kul