Как проверить, является ли конкретный элемент видимым и выполнять задачу только тогда в CasperJS?

Question

Я хочу проверить, когда элемент становится видимым для человеческого глаза. Я использовал такие методы, как this.exists(), но это не помогает, поскольку оно все еще не отображается.

Я наконец нашел способ вывода данных, которые говорят мне, видимо или нет, с помощью getElementsInfo().

Вот что у меня есть и выход:

var fs = require('fs'); 

var casper = require('casper').create({ 
    viewportSize: {width: 950, height: 950} 
}); 

casper.start('https://example.com/check.html', function() { 
    //this.captureSelector('1p.png', 'body'); 
    this.echo(this.getTitle()); 
}); 
casper.then(function(){ 
    var one = casper.cli.get(0); 
    var two = casper.cli.get(1); 
    this.sendKeys('input[id="txt"]',one); 

    casper.waitForSelector('#txtsend', function() { 
     this.click('#txtsend'); 
    }); 
    casper.waitForSelector('#Step1', function() { 
     require('utils').dump(this.getElementsInfo('#Step1')); 
     var a = this.fetchText('#Step1'); 
     this.echo(a); 
    }); 
}); 

casper.run(); 

Это выход я хочу проверить visible является истинным или ложным, и если истинное выполнить команду и если ложно запустить другой.

[ 
    { 
     "attributes": { 
      "id": "Step1" 
     }, 
     "height": 42, 
     "html": "This is ready to complete", 
     "nodeName": "span", 
     "tag": "<span id=\"Step1\">This is ready to complete</span>", 
     "text": "This is ready to complete, 
     "visible": true, // this can also be false this is what i want to fetch and monitor whether true or fals 
     "width": 229, 
     "x": 624, 
     "y": 484 
    } 
] 

Answer 1

Существует специально ступенчатую функцию для ожидания, пока элемент на странице становится видимым, который метко назвал waitUntilVisible(), который является лишь сокращение для waitFor() в сочетании с visible().

В вашем случае вы бы использовать его как это:

casper.waitForSelector('#txtsend', function() { 
    this.click('#txtsend'); 
}).waitUntilVisible('#Step1', function then() { 
    var a = this.fetchText('#Step1'); 
    this.echo(a); 
    // do something 
}, function onTimeout(){ 
    this.echo("not found"); 
    // do something else 
}); 

Вы также можете опустить onTimeout обратного вызова. Если элементы не найдены, это остановит сценарий.

Кроме того, вам не нужно, чтобы разобрать что-либо, потому что выход getElementsInfo() это объект, который вы можете просто доступ:

var info = casper.getElementsInfo("#Step"); 
casper.echo("Is visible? " + info[0].visible); 

Вы можете также использовать getElementInfo(), который возвращает только данные из первого согласованного элемент вместо массива информации элемента.