訪問和填充div元素

Question

這裏的具體發生難度網頁

<div id="upload" class="panel"> 
     <div style="width:720px" align="left"> 
      <table border="0"><tr> 
       <td> 
        <div><input name="attachment[]" type="file"></div> 
        <div><input name="attachment[]" type="file"></div> 
        <div><input name="attachment[]" type="file"></div> 
        <div><input name="attachment[]" type="file"></div> 
        <div><input name="attachment[]" type="file"></div> 
       </td> 
       <td> 
        <div><input name="attachment[]" type="file"></div> 
        <div><input name="attachment[]" type="file"></div> 
        <div><input name="attachment[]" type="file"></div> 
        <div><input name="attachment[]" type="file"></div> 
        <div><input name="attachment[]" type="file"></div> 
       </td> 
       <td> 
        <div><input name="attachment[]" type="file"></div> 
        <div><input name="attachment[]" type="file"></div> 
        <div><input name="attachment[]" type="file"></div> 
        <div><input name="attachment[]" type="file"></div> 
        <div><input name="attachment[]" type="file"></div> 
       </td> 
      </tr></table> 
</div> 

我填充像

page.uploadFile('input[type=file]', 'test2.png'); 

文件類型輸入這總是填充第一個div輸入附件的文件類型的HTML部分。

我怎樣才能改變這種填充第一/第二...到第十五個div元素文件類型？

Answer 1

看起來page.uploadfile只接受簡單的類CSS選擇器，但沒有其他修飾符，如nth-child，所以除非它們有自己的類或ID，否則無法定位所有輸入。

但是...我們可以用page.evaluate來操縱頁面！讓我們給他們獨特的類：

total_inputs = page.evaluate(function(){ 
    // Assign different class names to all file inputs 
    var inputs = document.querySelectorAll('input[type=file]'), i; 
    for (i = 0; i < inputs.length; ++i) { 
     inputs[i].className = "file" + i; 
    } 
    // pass back to PhantomJS scope information about how many inputs there are 
    return inputs.length; 
}); 

// Now upload those files! 
for (q = 0; q < total_inputs; ++q) { 
    page.uploadFile('input[class=file' + q + ']', 'test2.png'); 
} 

結果：

注意PhantomJS的某些型號已不能上傳文件。