用casper实时聊天刮(Youtube).选择聚合物元素的问题

Question

我试图使用casper从youtube实时聊天源中删除文本.我在选择正确的选择器时遇到问题.每个被推出的新消息都有许多嵌套元素和动态生成的元素.怎么可能继续拉嵌套

<span id="message">some message</span>

他们发生了什么？我目前似乎无法抓住一个甚至一个!这是我的测试代码:注意:您可以替换任何具有实时聊天Feed的youtube网址.

const casper = require("casper").create({
  viewportSize: {
    width: 1080,
    height: 724
  }
});
const ua = 'Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0'
const url = "https://www.youtube.com/watch?v=NksKCLsMUsI";
casper.start();
casper.userAgent(ua)
casper.thenOpen(url, function() {
  this.wait(3000, function() {
    if (this.exists("span#message")) {
      this.echo("found the a message!");
    } else {
      this.echo("can't find a message");
    }
    casper.capture("test.png");
  });
});

casper.run();

我的问题正是这样.如何正确选择消息？2,我怎么能不断听新的呢？

更新:我一直在玩噩梦(电子测试套件),这看起来很有希望,但我仍然无法选择聊天元素.我知道我错过了一些简单的事情.

编辑/更新(使用cadabra的好例子)

var casper = require("casper").create({
  viewportSize: {
    width: 1024,
    height: 768
  }
});

url = 'https://www.youtube.com/live_chat?continuation=0ofMyAMkGiBDZzhLRFFvTFJVRTFVVlkwZEV4MFRFVWdBUSUzRCUzRDAB'
ua = 'Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0'

casper.start(url)
casper.userAgent(ua);

var currentMessage = '';

(function getPosts() {
  var post = null;

  casper.wait(1000, function () {
    casper.capture('test.png')
    post = this.evaluate(function () {
      var nodes = document.querySelectorAll('yt-live-chat-text-message-renderer'),
          author = nodes[nodes.length - 1].querySelector('#author-name').textContent,
          message = nodes[nodes.length - 1].querySelector('#message').textContent;

      return {
        author: author,
        message: message
      };
    });
  });

  casper.then(function () {
    if (currentMessage !== post.message) {
      currentMessage = post.message;
      this.echo(post.author + ' - ' + post.message);
    }
  });

  casper.then(function () {
    getPosts();
  });
})();

casper.run();

Answer 1

这比你想象的要困难得多......看看我尝试了什么，但没有成功：

1.使用ignore-ssl-errors选项

YouTube 使用 HTTPS。这对我们来说是一个真正的问题，因为 PhantomJS 不太喜欢 SSL/TLS……这里我们需要使用ignore-ssl-errors. 该选项可以在命令行中传递：

casperjs --ignore-ssl-errors=true script.js

2.访问聊天页面而不是 iframe

我们试图抓取的评论不在主页上。它们来自加载在iframe. 在 CasperJS 中，我们可以使用该withFrame()方法，但这对于我们可以直接访问的东西来说是无用的复杂性......

主页| 聊天页面

3. 使用 PhantomJS (WebKit) 和 SlimerJS (Gecko) 进行测试

由于 YouTube 的限制，两种浏览器都给出了相同的结果：

不好了！
您似乎使用的是旧版浏览器。请更新它以使用实时聊天。

如果你想测试自己，这里是脚本：

var casper = require("casper").create({
  viewportSize: {
    width: 1080,
    height: 724
  }
});

casper.start('https://www.youtube.com/live_chat?continuation=0ofMyAMkGiBDZzhLRFFvTFRtdHpTME5NYzAxVmMwa2dBUSUzRCUzRDAB');

casper.wait(5000, function () {
  this.capture('chat.png');
});

casper.run();

幻影JS： casperjs --ignore-ssl-errors=true script.js

SlimerJS： casperjs --engine=slimerjs script.js

结论：您可能需要使用真实的Web 浏览器（如 Firefox 或 Chromium）来实现此目的。像Nightwatch.js这样的自动化框架可以帮助...

编辑 1

好的，所以......使用你的user-agent字符串，这是有效的：

var casper = require("casper").create({
  viewportSize: {
    width: 1080,
    height: 724
  }
});

casper.userAgent('Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0');

casper.start('https://www.youtube.com/live_chat?continuation=0ofMyAMkGiBDZzhLRFFvTFRtdHpTME5NYzAxVmMwa2dBUSUzRCUzRDAB');

casper.wait(5000, function () {
  this.each(this.evaluate(function () {
    var res = [],
        nodes = document.querySelectorAll('yt-live-chat-text-message-renderer'),
        author = null,
        message = null;

    for (var i = 0; i < nodes.length; i++) {
      author = nodes[i].querySelector('#author-name').textContent.toUpperCase();
      message = nodes[i].querySelector('#message').textContent.toLowerCase();
      res.push(author + ' - ' + message);
    }

    return res;
  }), function (self, post) {
    this.echo(post);
  });
});

casper.run();

使用此脚本，您应该会在终端中看到来自对话的最新消息。:)

编辑 2

由于视频回来了，我花了一些时间修改我之前的代码，以使用递归 IIFE 实现实时轮询。使用以下脚本，我可以获得聊天流中的最新评论。每秒发送一次请求以刷新内容，并过滤帖子以避免重复。

var casper = require("casper").create({
  viewportSize: {
    width: 1080,
    height: 724
  }
});

casper.userAgent('Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0');

casper.start('https://www.youtube.com/live_chat?continuation=0ofMyAMkGiBDZzhLRFFvTFRtdHpTME5NYzAxVmMwa2dBUSUzRCUzRDAB');

var currentMessage = '';

(function getPosts() {
  var post = null;

  casper.wait(1000, function () {
    post = this.evaluate(function () {
      var nodes = document.querySelectorAll('yt-live-chat-text-message-renderer'),
          author = nodes[nodes.length - 1].querySelector('#author-name').textContent,
          message = nodes[nodes.length - 1].querySelector('#message').textContent;

      return {
        author: author,
        message: message
      };
    });
  });

  casper.then(function () {
    if (currentMessage !== post.message) {
      currentMessage = post.message;
      this.echo(post.author + ' - ' + post.message);
    }
  });

  casper.then(function () {
    getPosts();
  });
})();

casper.run();

它在我的电脑上完美运行。