javascript - 单击具有给定类的页面上的所有 anchor 标记，但在导航之前取消

Question

尝试对某些分析跟踪代码进行一些自动化测试，但当我尝试将 links 传递到 each() 方法时遇到了问题。

我从 stackoverflow - how to follow all links in casperjs 复制了很多这个, 但我不需要返回链接的 href ；我需要返回链接本身(这样我才能点击它)。我不断收到此错误:each() 仅适用于数组。我不是返回数组吗？

更新:

对于每个具有 .myClass 的 anchor 标记，单击它，然后从 casper.options.onResourceReceived 返回请求的参数，例如事件类别、事件操作等。我可能会也可能不会取消点击后发生的导航；我只需要审核请求，不需要加载后续页面。

测试步骤:

1. 单击包含 .myClass 的链接>
2. 查看请求参数
3. 取消点击以防止它转到下一页。

我是 javascript 和 casper.js 的新手，所以如果我误解了，我深表歉意。

另一项更新:我更新了代码以返回一个类数组。不过，其中有一些粗略的代码(请参阅内联评论)。

但是，我现在在点击后取消导航时遇到问题。 .Clear() 取消了所有的js。无论如何要防止点击后发生默认操作？像 e.preventDefault(); 吗？

var casper = require('casper').create({
    verbose: true,
    logLevel: 'debug'
});

casper.options.onResourceReceived = function(arg1, response) {

    if (response.url.indexOf('t=event') > -1) {
        var query = decodeURI(response.url);
        var data = query.split('&');
        var result = {};
        for (var i = 0; i < data.length; i++) {
            var item = data[i].split('=');
            result[item[0]] = item[1];
        }
        console.log('EVENT CATEGORY = ' + result.ec + '\n' +
            'EVENT ACTION = ' + result.ea + '\n' +
            'EVENT LABEL = ' + decodeURIComponent(result.el) + '\n' +
            'REQUEST STATUS = ' + response.status
        );

    }
};

var links;
//var myClass = '.myClass';

casper.start('http://www.leupold.com', function getLinks() {
    links = this.evaluate(function() {

        var links = document.querySelectorAll('.myClass');
        // having issues when I attempted to pass in myClass var.

        links = Array.prototype.map.call(links, function(link) {

            // seems like a sketchy way to get a class. what happens if there are multiple classes?
            return link.getAttribute('class');
        });

        return links;
    });
});

casper.waitForSelector('.myClass', function() {

    this.echo('selector is here');
    //this.echo(this.getCurrentUrl());
    //this.echo(JSON.stringify(links));

    this.each(links, function(self, link) {
        self.echo('this is a class : ' + link);
        // again this is horrible
        self.click('.' + link);
    });
});



casper.run(function() {
    this.exit();
});

Answer 1

您要处理两个问题。

1。根据类选择元素

通常一个类会被多次使用。所以当你第一次选择基于这个类的元素时，你会得到具有那个类的元素，但不保证这个是唯一的。例如，请参阅您可以通过 .myClass 选择的元素选择:

1. 我的类
2. myClass myClass2
3. myClass myClass3
4. 我的类
5. myClass myClass3

当您稍后迭代这些类名时，您遇到了问题，因为使用 casper.click("."+ links[i].replace("", "永远无法单击 4 和 5 .")) (您需要另外用点替换空格)。 casper.click 只点击第一次出现的特定选择器。这就是为什么 I used createXPathFromElement取自 stijn de ryck为页面上下文中的每个元素找到唯一的 XPath 表达式。

然后您可以像这样通过唯一的 XPath 单击正确的元素

casper.click(x(xpathFromPageContext[i]));

2。取消导航

这可能取决于您的页面实际是什么。

注意:我使用 casper.test 属性，它是 Tester module .您可以像这样调用 casper 来访问它:casperjs test script.js。

注意:还有 casper.waitForResource功能。看看吧。

2.1 网络 1.0

当点击意味着将加载新页面时，您可以将事件处理程序添加到 page.resource.requested事件。然后，您可以abort() 请求，而无需将页面重置回startURL。

var resourceAborted = false;
casper.on('page.resource.requested', function(requestData, request){
    if (requestData.url.match(/someURLMatching/)) {
        // you can also check requestData.headers which is an array of objects:
        // [{name: "header name", value: "some value"}]
        casper.test.pass("resource passed");
    } else {
        casper.test.fail("resource failed");
    }
    if (requestData.url != startURL) {
        request.abort();
    }
    resourceAborted = true;
});

在测试流程中:

casper.each(links, function(self, link){
    self.thenClick(x(link));
    self.waitFor(function check(){
        return resourceAborted;
    });
    self.then(function(){
        resourceAborted = false; // reset state
    });
});

2.2 单页应用

可能附加了很多事件处理程序，很难全部阻止。一种更简单的方法(至少对我而言)是

1. 获取所有独特的元素路径，
2. 遍历列表并每次执行以下操作:
   1. 再次打开原始页面(基本上重置每个链接)
   2. 点击当前的 XPath

这基本上就是我在 this answer 中所做的.

因为单页应用程序不加载页面。 navigation.requested和 page.resource.requested不会被触发。你需要 resource.requested事件，如果你想检查一些 API 调用:

var clickPassed = -1;
casper.on('resource.requested', function(requestData, request){
    if (requestData.url.match(/someURLMatching/)) {
        // you can also check requestData.headers which is an array of objects:
        // [{name: "header name", value: "some value"}]
        clickPassed = true;
    } else {
        clickPassed = false;
    }
});

在测试流程中:

casper.each(links, function(self, link){
    self.thenOpen(startURL);
    self.thenClick(x(link));
    self.waitFor(function check(){
        return clickPassed !== -1;
    }, function then(){
        casper.test.assert(clickPassed);
        clickPassed = -1;
    }, function onTimeout(){
        casper.test.fail("Resource timeout");
    });
});