Chrome和Firefox之间的Xpath评估差异

时间:2016-06-22 09:40:44

标签: google-chrome firefox xpath

目标:尝试通过提供表索引,列标题和行号从第n个表中选择单元格。我在Firefox中使用的xpath,但不适用于Chrome。

同样的xpath在Firefox中有效,但无法在Chrome中进行评估。

xpath正在尝试使用列标题选择表中的单元格。

在Firefox中工作,但不在Chrome中工作

(//table)[count((//table)[5]/descendant::th)]

Firefox,根据表5中的列数返回表格,但Chrome不返回任何内容。

((//table)[2]/tbody/tr[1]/td)[count((//table)[2]/descendant::th[.='TextField']/preceding-sibling::th)+1]

Firefox返回“TextField”列第一行中的单元格,Chrome不返回任何内容。

我正在使用的html是一个div汤,如下所示。尝试在Chrome与Firefox中运行代码段,结果会有所不同(如果您运行代码段并完全向下滚动,则可以找到它们。)

// Print title
document.body.insertAdjacentHTML('beforeEnd', '<h2>Table Query Results<\/h2>');
// Evaluate the xpath
var resultTable = document.evaluate("(//table)[count((//table)[2]/descendant::th)-3]", document, null, XPathResult.ANY_TYPE, null);
var resultTableVal = null;
// If the xpath returned a result, grab the first result
if (resultTable != null) resultTableVal = resultTable.iterateNext();
// If both the xpath result and first result have values
if (resultTable != null && resultTableVal != null) {
  // Create a pre tag
  var preTable = document.createElement('pre');
  // While there are results
  while (resultTableVal) {
    // Add them to pre
    preTable.textContent += 'Found ' + resultTableVal.outerHTML + '\n';
    resultTableVal = resultTable.iterateNext();
  }
  document.body.appendChild(preTable);
}
else {
  document.body.insertAdjacentHTML('beforeEnd', '<p>No node found.<\/p>');
}

document.body.insertAdjacentHTML('beforeEnd', '<h2>Cell Query Results<\/h2>');
var resultCell = document.evaluate("((//table)[2]/tbody/tr[1]/td)[count((//table)[2]/descendant::th[.='TextField']/preceding-sibling::th)+1]", document, null, XPathResult.ANY_TYPE, null);
var resultCellVal = null;
if (resultCell != null) resultCellVal = resultCell.iterateNext();
if (resultCell != null && resultCellVal != null) {
  var preCell = document.createElement('pre');
  while (resultCellVal) {
    preCell.textContent += 'Found ' + resultCellVal.outerHTML + '\n';
    resultCellVal = resultCell.iterateNext();
  }
  document.body.appendChild(preCell);
}
else {
  document.body.insertAdjacentHTML('beforeEnd', '<p>No node found.<\/p>');
}
table { border: 1px solid black; }
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <div>
    <div>
      <h3>Grids</h3>
      <div></div>
      <div></div>
    </div>
    <div></div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div>
                    <div>
                      <div>
                        <span>EditableGrid</span><em>*</em>
                      </div>
                      <div>
                        <p></p>
                      </div>
                      <div>
                        <div>
                          <table>
                            <colgroup>
                              <col>
                              <col>
                              <col>
                              <col>
                              <col>
                              <col>
                              <col>
                            </colgroup>
                            <thead>
                              <tr>
                                <th>
                                  <div>
                                    <h2>TextField</h2><a><i></i></a>
                                  </div>
                                </th>
                                <th>
                                  <div>
                                    <h2>ParagraphField</h2><a><i></i></a>
                                  </div>
                                </th>
                                <th>
                                  <div>
                                    <h2>EncryptedTextField</h2><a><i></i</a>
                                  </div>
                                </th>
                                <th>
                                  <div>
                                    <h2>IntegerField</h2><a><i></i></a>
                                  </div>
                                </th>
                                <th>
                                  <div>
                                    <h2>DecimalField</h2><a><i></i></a>
                                  </div>
                                </th>
                                <th>
                                  <div>
                                    <h2>DateField</h2><a><i></i></a>
                                  </div>
                                </th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr>
                                <td>
                                  <div>
                                    <div>
                                      <div>
                                        <span><em>*</em>
                                        <label>Label</label></span>
                                        <div>
                                          <div>
                                            Text Input
                                          </div>
                                        </div>
                                        <div>
                                          <p></p>
                                        </div>
                                        <div></div>
                                        <div></div>
                                      </div>
                                    </div>
                                  </div>
                                </td>
                                <td>
                                  <div>
                                    <div>
                                      <div>
                                        <span><em>*</em>
                                        <label>Label</label></span>
                                        <div>
                                          <div>
                                            Paragraph input
                                          </div>
                                        </div>
                                        <div>
                                          <p></p>
                                        </div>
                                        <div></div>
                                        <div></div>
                                      </div>
                                    </div>
                                  </div>
                                </td>
                                <td>
                                  <div>
                                    <div>
                                      <div>
                                        <span><em>*</em>
                                        <label>Label</label></span>
                                        <div>
                                          <div>
                                            Encrypted Text input
                                          </div>
                                        </div>
                                        <div>
                                          <p></p>
                                        </div>
                                        <div></div>
                                        <div></div>
                                      </div>
                                    </div>
                                  </div>
                                </td>
                                <td>
                                  <div>
                                    <div>
                                      <div>
                                        <span><em>*</em>
                                        <label>Label</label></span>
                                        <div>
                                          <div>
                                            Integer Input
                                          </div>
                                        </div>
                                        <div>
                                          <p></p>
                                        </div>
                                        <div></div>
                                        <div></div>
                                      </div>
                                    </div>
                                  </div>
                                </td>
                                <td>
                                  <div>
                                    <div>
                                      <div>
                                        <span><em>*</em>
                                        <label>Label</label></span>
                                        <div>
                                          <div>
                                            Decimal input
                                          </div>
                                        </div>
                                        <div>
                                          <p></p>
                                        </div>
                                        <div></div>
                                        <div></div>
                                      </div>
                                    </div>
                                  </div>
                                </td>
                                <td>
                                  <div>
                                    <div>
                                      <div>
                                        <span><em>*</em>
                                        <label>Label</label></span>
                                        <div>
                                          <div>
                                            <div>
                                              Date input
                                            </div>
                                          </div>
                                        </div>
                                        <div>
                                          <p></p>
                                        </div>
                                        <div></div>
                                        <div></div>
                                      </div>
                                    </div>
                                  </div>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                      <div></div>
                    </div>
                  </div>
                </div>
                <div>
                  <div>
                    <div>
                      <div>
                        <span>ReadOnlyGrid</span><em>*</em>
                      </div>
                      <div>
                        <p></p>
                      </div>
                      <div>
                        <div>
                          <table>
                            <colgroup>
                              <col>
                              <col>
                              <col>
                              <col>
                              <col>
                              <col>
                            </colgroup>
                            <thead>
                              <tr>
                                <th>
                                  <div>
                                    <h2>TextField</h2><a><i></i></a>
                                  </div>
                                </th>
                                <th>
                                  <div>
                                    <h2>ParagraphField</h2><a><i></i></a>
                                  </div>
                                </th>
                                <th>
                                  <div>
                                    <h2>EncryptedTextField</h2><a><i></i>/a>
                                  </div>
                                </th>
                                <th>
                                  <div>
                                    <h2>IntegerField</h2><a><i></i></a>
                                  </div>
                                </th>
                                <th>
                                  <div>
                                    <h2>DecimalField</h2><a><i></i></a>
                                  </div>
                                </th>
                                <th>
                                  <div>
                                    <h2>DateField</h2><a><i></i></a>
                                  </div>
                                </th>
                              </tr>
                            </thead>
                            <tfoot></tfoot>
                            <tbody>
                              <tr>
                                <td>Column1</td>
                                <td>Column2</td>
                                <td>Column3</td>
                                <td>Column4</td>
                                <td>Column5</td>
                                <td>Column6</td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                      <div></div>
                    </div>
                  </div>
                </div>
                <div>
                  <div>
                    <div>
                      <span>EditableGrid</span><em>*</em>
                    </div>
                    <div>
                      <p></p>
                    </div>
                    <div>
                      <div>
                        <table>
                          <colgroup>
                            <col>
                            <col>
                            <col>
                            <col>
                          </colgroup>
                          <thead>
                            <tr>
                              <th>
                                <div>
                                  <h2>PickerField1</h2><a><i></i></a>
                                </div>
                              </th>
                              <th>
                                <div>
                                  <h2>PickerField2</h2><a><i></i></a>
                                </div>
                              </th>
                              <th>
                                <div>
                                  <h2>PickerField3</h2><a><i></i></a>
                                </div>
                              </th>
                              <th>
                                <div>
                                  <h2>PickerField4</h2><a><i></i></a>
                                </div>
                              </th>
                            </tr>
                          </thead>
                          <tfoot></tfoot>
                          <tbody>
                            <tr>
                              <td>Userpick data</td>
                              <td>Grouppicker data</td>
                              <td>User group picker data</td>
                              <td>Document picker</td>
                            </tr>
                            <tr>
                              <td>Folder Picker</td>
                              <td>Document folder picker</td>
                              <td>Custom picker</td>
                              <td><span>*</span></td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

尝试使用(//table)[count((//table)[5]/descendant::th)]重现问题:

var result = document.evaluate('(//table)[count((//table)[5]/descendant::th)]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
if (result != null) {
  var pre = document.createElement('pre');
  pre.textContent = 'Found ' + result.outerHTML;
  document.body.appendChild(pre);
}
else {
  document.body.insertAdjacentHTML('beforeEnd', '<p>No node found.<\/p>');
}
table { border: 1px solid black; }
<table id="t1">
  <tbody>
    <tr>
      <td>table 1</td>
    </tr>
  </tbody>
</table>

<table id="t2">
  <tbody>
    <tr>
      <td>table 2</td>
    </tr>
  </tbody>
</table>

<table id="t3">
  <tbody>
    <tr>
      <td>table 3</td>
    </tr>
  </tbody>
</table>

<table id="t4">
  <tbody>
    <tr>
      <td>table 4</td>
    </tr>
  </tbody>
</table>

<table id="t5">
  <thead>
    <tr>
      <th>table 5 header </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>table 5</td>
    </tr>
  </tbody>
</table>

我在Firefox,Edge和Chrome上获得相同的结果,第一个表被选中,第五个表有一个th元素。考虑编辑您的问题并插入代码片段,以便我们重现问题。