如何使用 Apify 登录网站并点击按钮？

Posted 2023-03-24

【中文标题】如何使用 Apify 登录网站并点击按钮？

【英文标题】：How to use Apify to log in to a site and click a button?

【发布时间】：2020-02-01 17:44:39

【问题描述】：

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

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

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

1。扎皮尔

Zapier 应该调用 Apify Actor 来完成这项工作。现有 zap 中的操作已经可以访问动态 id_code。一个额外的动作应该“运行 Actor”给 Apify，将 id_code 或完整 URL https://studio.example.com/products/videocloud/media/videos/6091481925001 传递给 Apify 以继续运行。

如何通过“输入正文”正确地将值传递给 Apify？

2。登录

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

“电子邮件地址”（input 与 id="email" 和 name="email"） “密码”（input 与 id="password" 和 name="password"） “登录”按钮（button 与 id="signinButton" 和 type="submit"）

如何在此处使用 Actor 登录？

3。点击

一旦通过身份验证，就会出现目标页面。它有一个按钮栏，包括“激活”按钮（button 其子 span 文本只有在我们被允许点击时才必须是“激活”）。

（仅供参考 - 单击后，按钮文本应变为“停用”）。

如何让 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.');


    );

【参考方案1】：

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

   "id_code": "ID_CODE_FROM_ZAPIER"

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

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

然后您需要获取您的凭据。如果它们不改变，我会将它们保存为演员的环境变量。如果您将它们命名为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()
)

【讨论】：

卢卡斯，谢谢。对于初学者。我已经创建了添加到问题中的代码，以满足 (2) - 初始登录。但是，该过程在await page.waitForNavigation(); 处超时，即使等待时间很长。出了什么问题？ NB1。链接的示例显示了带有input 的凭据，但是为了从getEnv() 获取它们，我关注了文档并使用了process.env.VARNAME。 NB2 测试环境变量 EMAIL 和 PASSWORD 可以返回设置值。 NB3 Puppeteer 对电子邮件、密码或提交按钮的任何选择器构造都没有问题。

【参考方案2】：

您可以使用 waitUntil 参数，例如

await page.waitForNavigation(
   waitUntil: "networkidle2"  
);

** 查看文档了解更多信息https://pptr.dev/#?product=Puppeteer&version=v1.20.0&show=api-pagewaitfornavigationoptions

或者您可以等待元素选择器出现在页面中 例如

await page.waitForSelector('.buttonSelector')

** 查看文档了解更多信息https://pptr.dev/#?product=Puppeteer&version=v1.20.0&show=api-pagewaitforselectorselector-options