puppeteer - 如何使用 Apify 登录站点并单击按钮？

Question

我需要使用Apify和 Zapier自动执行 i) 登录受密码保护的网页和 ii) 单击按钮。我该怎么做？

我认为我应该在 Actor 中使用 Puppeteer，但我不确定如何使用。

目标 URL 会不时更改。它们的格式是 https://studio.example.com/products/videocloud/media/videos/{id_code} 其中 {id_code} 例如是 6091481925001.

1。扎 PIL

Zapier 应该调用 Apify Actor 来完成工作。现有 zap 中的操作已经可以访问动态 {id_code}。附加操作应该“运行 Actor”到 Apify，传递 {id_code} 或完整的 URL https://studio.example.com/products/videocloud/media/videos/6091481925001 到 Apify 上运行。

如何通过“Input Body”将值正确传递给 Apify？

2。登录

在未经身份验证的情况下访问时，页面重定向到登录表单，位于 https://signin.example.com/?redirect=https%3A%2F%2Fstudio.example.com%2Fproducts%2Fvideocloud%2Fmedia% 2Fvideos%2F6091481925001 有:

• “电子邮件地址”(input with id="email" and name="email")
• “密码”(input with id="password" and name="password")
• “登录”按钮(带有 id="signinButton" 和 type="submit" 的按钮)

这里如何使用Actor登录？

3。点击

一旦通过身份验证，目标页面就会出现。它有一个按钮栏，包括按钮“Activate”(button 其子 span 文本必须只有在允许我们单击它时才为“Activate”)。

(有关信息 - 单击后，按钮文本应变为“停用”)。

如何让 Apify 点击此处的“激活”按钮？

据我所知，这不是一个抓取的工作，因为我不想从网页返回数据，所以我不应该使用 apify/puppeteer-scraper或 apify/web-scraper .

更新:

到目前为止，我有以下内容。但是，Apify 内部的 Puppeteer 超时 - 相当长的值高达 9000 毫秒，这表明它不一定是页面加载问题(？)

const Apify = require('apify');

    Apify.main(async () => {



        // Get credentials
        const { EMAIL, PASSWORD } = Apify.getEnv();         // Docs for using values: https://apify.com/docs/actor#source-env-vars


        // Launch Puppeteer
        const browser = await Apify.launchPuppeteer();
        const page = await browser.newPage();
        await page.goto('https://signin.example.com/login');

        // Login
        await page.type('#email', process.env.EMAIL);
        console.log('Attempted to enter email');

        await page.type('#password', process.env.PASSWORD);
        console.log('Attempted to enter password');

        await page.click('#signinButton');
        console.log('Attempted to click button');    

        // Times-out here

        await page.waitForNavigation();
        console.log('Attempted to wait for navigation');

        // Get cookies
        const cookies = await page.cookies();
        console.log('Attempted to wait for cookies');

        await browser.close();

        console.log('Done.');


    });

Answer 1

1) 您可以将任意 JSON 传递给输入。只传递 as 是有意义的

{
   "id_code": "ID_CODE_FROM_ZAPIER"
}

2) 在 Apify 方面，您需要先阅读输入

const input = await Apify.getInput();
const { id_code } = input;

然后您需要获取您的凭据。如果它们不改变，我会将它们保存为 Actor 的环境变量。如果您将它们命名为 EMAIL 和 PASSWORD，您就可以通过以下方式在代码中访问它们

const { EMAIL, PASSWORD } = Apify.getEnv();

现在您需要启动 Puppeteer，转到登录页面，填写输入字段并单击提交。这很简单，示例显示在这个 article 中.您现在无需担心 cookie。

3) 登录后，您需要通过

转到所需的 URL

await page.goto(`https://studio.example.com/products/videocloud/media/videos/${id_code}`)

要在没有有用的选择器时找到要单击的确切元素，可以使用 JQuery 并查找文本。我无法登录，所以我不能 100% 确定这会起作用。

// We need to inject JQuery first
await Apify.utils.puppeteer.injectJQuery(page);

// We can use JQuery only in the browser context, which means inside evaluate
await page.evaluate(() => {
    $('button:contains("Activate")').click()
})