CasperJS：下拉列表;选择一个选项，代码适用于浏览器和slimer，但不适用于幻像 [英] CasperJS : dropdown list; select an option, code works in browser&slimer but not with phantom

问题描述

这是我的问题：我在一个特定的情况下，我尝试设置选择下拉列表的选项。
我通常使用 this.mouse.up（）+ this.mouse.down（）但在这种情况下我不能因为这种行为不起作用在webkit网站上（您可以将这两者与谷歌浏览器和Firefox进行比较）。

Here my problem : I'm in a specific case where I try to set the option of a select dropdown list. I usually use this.mouse.up() + this.mouse.down() but I can't in this case because this behavior doesn't work on the website with webkit (you can compare the two with google chrome and Firefox).

这里的网址是：我想在我的示例中将字段'ANNEE'设置为2008年的一年

我的代码:(我的函数更改了HTML并启动了更改（ ）事件）

My code : (my function changes the HTML and launches the change() event)

//custom function
casper.fillSelect = function(selectSelector, optionText){
    this.evaluate(function(sel,setByText) {
        if ("createEvent" in document) {
            var evt = document.createEvent("HTMLEvents")
                ,x = document.querySelectorAll(sel + ' > option')
                ,l = x.length
                ;
                evt.initEvent("change", false, true);

            for (i=0; i<l; i++){
                if(x[i].textContent.indexOf(setByText) !== -1){
                    console.log(x[i]);
                    console.log(x[i].getAttribute('value'));
                    x[i].setAttribute('selected', true);
                    x[i].parentNode.dispatchEvent(evt);
                }
            }
        }
        else {console.log("error with fillSelect");}
    },selectSelector, optionText);
};

//event
casper.test.on('fail', function(failure) {
    casper.capture('fail.png');
});

/*************************************** Tests *****************************************************/
casper.test.begin('\n********* Compare : ***********', function (test) {
    "use strict";
    casper.start()
    .thenOpen("http://www.linternaute.com/voyage/climat/paris/ville-75056",function(){
        casper.fillSelect('fieldset.fcNeutre > div.odSelect:nth-of-type(2) > select', '2008');
    })
    .waitForUrl(/2008/, function(){
        this.capture('fail2.png');
        this.test.assertSelectorHasText("h2", "maximales");
        this.test.assertSelectorHasText("h2", "minimales");
        this.test.assertSelectorHasText("h2", "Paris");
        this.test.assertSelectorHasText("h2", "Le soleil");
        this.test.assertSelectorHasText("h2", "La pluie");
        this.test.assertExists("tspan");
        this.test.assertExists("div.marB20");
        this.test.assertNotEquals(this.fetchText("div.marB20 > table > thead > tr > th"), "", "Table first data not empty");
    })
    .run(function() {
            this.test.comment('--- Done ---\n');
            test.done();
    });
});

相当于我的casper自定义函数，你可以在浏览器中执行它：

And the equivalent to my casper custom function, you can execute it in the browser :

var fillSelect = function(sel,setByText) {
    if ("createEvent" in document) {
        var evt = document.createEvent("HTMLEvents")
            ,x = document.querySelectorAll(sel + ' > option')
            ,l = x.length
            ;
            evt.initEvent("change", false, true);

        for (i=0; i<l; i++){
            if(x[i].textContent.indexOf(setByText) !== -1){
                //console.log(x[i]);
                //console.log(x[i].getAttribute('value'));
                x[i].setAttribute('selected', true);
                x[i].parentNode.dispatchEvent(evt);
            }
        }
    }
    else {console.log("error with fillSelect");}
};

fillSelect('fieldset.fcNeutre > div.odSelect:nth-of-type(2) > select', '2008');

所以它适用于FF，谷歌Chrome，slimerJS，但不适用于PhantomJS ...请帮助，如果你有另一个想法，只需在这个'ANNEE'字段中选择一个选项，使用casper + phantom，我就可以了！

So it works in FF, Google Chrome, with slimerJS, but not with PhantomJS ... help please, if you have another idea to just select one option in this 'ANNEE' field, with casper+phantom, I take !

这可能是浏览器兼容性的问题吗？

Could it be a problem of browser compatibility?

这很奇怪，因为在同一个网站上，有时它适用于其他'select'，与此相同......

It's strange because in the same website, sometimes it works with other 'select', identical to this one ...

推荐答案

由于页面中已经有jQuery，我编写了这段代码，捕获以及currentUrl显示了发生的变化。 Jquery能够正确地引发事件。我猜。

Since the page already has jQuery in it, I wrote this code and the capture as well as currentUrl shows the change happening. Jquery is able to raise the event correctly. I guess.

我希望你能从中提取必要的代码：

I hope you can extract the necessary code from this:

casper.on("load.finished", function (status) {
    if (status !== "success") {
        console.log('Failed to load page.');
    }
    else {

        var thisurl = casper.getCurrentUrl();
        window.count = (window.count || 0)+1;
        casper.capture('loaded'+window.count+'.png');

        if (window.count ==1) {
            casper.evaluate(function(sel, val){

                jQuery(sel).find("option:contains('"+val+"')").attr('selected', true);  
                jQuery(sel).change();

            }, 'fieldset.fcNeutre > div.odSelect:nth-of-type(2) > select', 2008);
        }

        console.log('Page loaded.' + thisurl);
        //casper.wait(2000, function(){
    }
});

祝您好运。

这篇关于CasperJS：下拉列表;选择一个选项，代码适用于浏览器和slimer，但不适用于幻像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！