javascript 在 node.js 中使用僵尸填写登录表单

Filling log in form with zombie in node.js

提问by Petri Mustonen

Evening! I'm trying to log in into a website with zombie.js, but I don't seem to be able to make it work. Oh and the website is in Finnish, but it's not very hard to understand, two text fields and a button. First is for username, second for password and the button is the log in button.

晚上！我正在尝试使用zombie.js 登录网站，但似乎无法使其正常工作。哦，该网站是芬兰语，但不是很难理解，两个文本字段和一个按钮。第一个是用户名，第二个是密码，按钮是登录按钮。

At the moment my log in code is as follows:

目前我的登录代码如下：

var Browser = require("zombie");
browser = new Browser();
browser.visit("https://www.nordnet.fi/mux/login/startFI.html?cmpi=start-loggain",
    function () {
        // Here I check the title of the page I'm on.
        console.log(browser.text("title"));
        // Here I fill the needed information.
        browser.document.getElementById("input1").value ="MYUSERNAME";
        browser.document.getElementById("pContent").value ="MYPASSWORD";
        // And here it fails. I try to submit the form in question.
        browser.document.getElementById("loginForm").submit();
        setTimeout(function () {
            // This is here to check that we've submitted the info and have been
            // redirected to a new website.
            console.log(browser.text("title"));
        }, 2000);
});

Now I know that I maybe should have used zombie's own "fill" method, but I tried that with no luck so I tried something new.

现在我知道我可能应该使用僵尸自己的“填充”方法，但我尝试了没有运气所以我尝试了一些新的东西。

All I get from this is an error:

我从中得到的只是一个错误：

Y:\IMC\Development\Web\node_modules\zombie\lib\zombie\forms.js:72
  return history._submit(_this.getAttribute("action"), _this.getAttribute(
                 ^
TypeError: Cannot call method '_submit' of undefined

Now if I log that browser.document.getElementById("loginForm")it clearly does find the form, but alas, it doesn't like it for some reason.

现在，如果我记录browser.document.getElementById("loginForm")它显然确实找到了表单，但是唉，由于某种原因它不喜欢它。

I also tried the "conventional" method with zombie, which is using that log in button on the web page and pressing it. The problem is that it's not actually a button, just an image which has a link attached to it, and it's all inside <span>. And I have no idea how I can "click" that button.

我还尝试了僵尸的“传统”方法，即使用网页上的登录按钮并按下它。问题是它实际上不是一个按钮，只是一个附有链接的图像，并且都在<span>. 而且我不知道如何“单击”该按钮。

It has no ID on it, so I can't use that, then I tried to use the text on it, but because it has umlauts on it I can't get it to work. Escaping the ? with /344 only gave an error:

它上面没有 ID，所以我不能使用它，然后我尝试在上面使用文本，但是因为上面有变音符号，我无法让它工作。逃离 ? /344 只给出了一个错误：

throw new Error("No BUTTON '" + selector + "'");
        ^
Error: No BUTTON 'Kirjaudu sis├?├?n'

So yeah, that didn't work, though I have no idea why it doesn't recognize the escaped umlaut correctly.

所以是的，那没有用，虽然我不知道为什么它不能正确识别转义的变音符号。

This is my first question, the second one is a minor one, but I though why not ask it here too now that I've written this text.

这是我的第一个问题，第二个问题是次要问题，但我想既然我已经写了这篇文章，为什么不在这里问这个问题。

If I get all this to work, can I somehow copy the cookie that this log in gives me, and use that in my YQL for screen scraping? Basically I'm trying to scrape stock market values, but without the log in the values are 15min deferred, which isn't too bad, but I'd like it to be live anyhow.

如果我让所有这些工作，我能不能以某种方式复制这个登录给我的 cookie，并在我的 YQL 中使用它来进行屏幕抓取？基本上，我试图刮取股票市场价值，但如果没有登录，价值会延迟 15 分钟，这还不错，但无论如何我都希望它继续存在。

回答by WTK

After couple of tests using zombie I came to the conclusion that it's still to early to use it for serious testing. Nevertheless, I came up with working example of form submit (using regular .submit()method).

在使用僵尸进行了几次测试后，我得出的结论是，将其用于认真的测试还为时过早。尽管如此，我还是想出了表单提交的工作示例（使用常规.submit()方法）。

var Browser = require("zombie");
var assert = require("assert");

browser = new Browser()
browser.visit("http://duckduckgo.com/", function () {
    // fill search query field with value "zombie"
    browser.fill('input[name=q]', 'mouse');
    // **how** you find a form element is irrelevant - you can use id, selector, anything you want
    // in this case it was easiest to just use built in forms collection - fire submit on element found
    browser.document.forms[0].submit();
    // wait for new page to be loaded then fire callback function
    browser.wait().then(function() {
        // just dump some debug data to see if we're on the right page
        console.log(browser.dump());
    })
});

As you can see, the clue is to use construct browser.wait().then(...)after submitting the form, otherwise browserobject will still refer to the initial page (the one passed as an argument to visitmethod). Note: history object will contain address of page you submitted your form to even if you don't wait for the page to load - it confused me for a bit, as I was sure that I should already seethe new page.

如您所见，线索是browser.wait().then(...)在提交表单后使用construct ，否则browser对象仍将引用初始页面（作为参数传递给visit方法的页面）。注意：history 对象将包含您提交表单的页面地址，即使您没有等待页面加载 - 这让我有点困惑，因为我确信我应该已经看到新页面了。

---

---

Edit: For your site, the zombie seems to be working ok (I could submit the form and get "wrong login or password" alert). There are some JS errors but zombie isn't concerned with them (you should debug those however to see if the script are working ok for regular users). Anyhow, here's the script I used:

编辑：对于您的网站，僵尸似乎工作正常（我可以提交表单并收到“错误的登录名或密码”警报）。有一些 JS 错误，但僵尸并不关心它们（但是，您应该调试这些错误以查看脚本对于普通用户是否正常工作）。无论如何，这是我使用的脚本：

var Browser = require("zombie");
var assert = require("assert");

browser = new Browser()
browser.visit("https://www.nordnet.fi/mux/login/startFI.html?cmpi=start-loggain", function () {
    // fill in login field
    browser.fill('#input1', 'zombie');
    // fill in password field
    browser.fill('#pContent', 'commingyourway');
    // submit the form
    browser.document.forms[0].submit();
    // wait for new page to be loaded then fire callback function
    browser.wait().then(function() {
        console.log('Form submitted ok!');
        // the resulting page will be displayed in your default browser
        browser.viewInBrowser();
    })
});

---

---

As side note: while I was trying to come up with working example I've tried to user following pages (all have failed for different reasons):

作为旁注：虽然我试图提出工作示例，但我已经尝试使用以下页面（由于不同原因，所有页面都失败了）：

• google.com - even though I filled query box with a string and submitted the form I didn't get search results . Reason? Probably google took some measures to prevent automatic tools (such as zombie) to browse through search results.
• bing.com - same as google - after submitting the form I didn't get search results. Reason? Probably same as for google.
• paulirish.com - After filling in the search query box and submitting the form zombie encountered script errors that prevent it from completing the page (something about missing ActiveX from charts script).
• perfectionkills.com - Surprisingly here I've encountered the same problems as with Paul Irish site - page with search resultscouldn't be loaded due to javascript errors.

• google.com - 即使我用字符串填充了查询框并提交了表单，我也没有得到搜索结果。原因？可能是google采取了一些措施来防止自动工具（比如zombie）浏览搜索结果。
• bing.com - 与谷歌相同 - 提交表单后我没有得到搜索结果。原因？可能和谷歌一样。
• paulirish.com - 填写搜索查询框并提交表单后，僵尸遇到阻止其完成页面的脚本错误（关于图表脚本中缺少 ActiveX 的问题）。
• Perfectkills.com - 令人惊讶的是，我在这里遇到了与 Paul Irish 网站相同的问题 -由于 javascript 错误，无法加载带有搜索结果的页面。

Conclusion: It's not so easy to force zombie into doing your work after all... :)

结论：毕竟强迫僵尸做你的工作并不容易...... :)