使用Protractor进行端到端测试以对排序进行测试

Question

我正在使用protractor编写端到端测试用例，试图编写排序（升序，降序）的测试。这是我的html代码。

<tbody>
    <tr>
        <td>
         <a ng-click="sortBy('Name')" href="" style="text-decoration: none;" class=""> Name</a>
        </td>
        <td>
         <a ng-click="sortBy('RollNo')" href="" style="text-decoration: none;"> Roll Number</a>
        </td>
        <td>
         <a ng-click="sortBy('subject')" href="" style="text-decoration: none;"> Subject</a>
        </td>     
    </tr>
    <tr>
        <td>ANDREW, STRAUSS</td>
        <td>122</td>
        <td>Maths</td>
    </tr>  
    <tr>
        <td>ANDREW, STRAUSS</td>
        <td>123</td>
        <td>Science</td>
    </tr>      
</tbody>

我们能测试排序吗？如果可以，怎么做？

- Nagarjuna Reddy

Answer 1

为了测试任何顺序的排序：

• 点击sortBy元素，这将按照一定顺序对元素进行排序。
• 获取以排序顺序显示的列中元素的文本。
• 稍后将每个元素的文本存储在数组中，以便以后检查排序。
• 下一步是将此未排序的数组复制到临时数组中并对其进行排序。
• 最后一件事是检查元素是否按照您需要的顺序排序，您可以使用expect语句来验证。

使用JavaScript的sort()方法来检查升序排序，使用reverse()来检查降序排序。

您可以通过将元素添加到数组中并将其与已排序的数组进行验证来测试元素的升序排序。以下是如何执行此操作的示例 -

var sorted = [] , unSorted = [];
var ele = element.all(by.css(tbody tr td:nth-of-type(1)));
ele.each(function(eachName){
    eachName.getText().then(function(name){
        unSorted[i] = name;
        i++;
    });
}).then(function(){
    //check sorting
    sorted = unSorted.slice();
    sorted.sort(); //use sort function of Javascript
    expect(sorted).toEqual(unSorted);
});

同样，你可以尝试使用其他元素来检查其他类型的排序，例如按RollNo和subject排序。如果你遇到异步错误问题，因为Protractor很快，那么你可以将排序验证代码与循环链接起来。

另一种方法是使用Protractor的map()函数将所有元素的文本获取到一个数组中，然后检查排序。我推荐使用这种方法。以下是一个例子 -

    ele.map(function(eachName){
        return eachName.getText().then(function(unSorted){
            return unSorted;
        });
    }).then(function(unSorted){
            var sorted = unSorted.slice();
            sorted = sorted.sort(); //sort the array
            expect(sorted).toEqual(unSorted); //check if both sorted and unsorted arrays are same
    });

希望这可以帮到你。

- giri-sh

---

感谢您的回复。在这里，我想测试每个单独的列。比如说，如果我点击“学生”，它应该只测试“学生”这一列。 - Nagarjuna Reddy

@N123 我已经在上面写了相同的答案。它只检查学生列。这完全是关于使用元素和使用数组进行排序检查。您也可以使用其他列进行测试。如果您对答案不清楚，请告诉我。 - giri-sh

是的，我不太清楚。你能给我一个例子吗？谢谢。 - Nagarjuna Reddy

@N123 更新了答案，并提供了可用于测试排序的步骤。 - giri-sh

@GirishSortur 执行 var sorted = unSorted; 会导致引用复制，而不是实际的数组复制，因此期望值 expect(sorted).toEqual(unSorted); 总是为真。你应该使用一个数组复制，使用 slice()，类似于 var sorted = unSorted.slice(0);。 - Daniel Nitzan

@danieln，我忘记切片数组以复制其值了。已更新答案。感谢你的帮助。 - giri-sh

Answer 2

另一种方法是创建一个已排序文本字段的数组，然后仅比较其中的值。在对数据进行排序后，您可以执行以下操作来测试升序。

const cellElements = element.all(by.css(`table tbody tr td:nth-child(1)`));
const textFields = await cellElements
                .map((el: ElementFinder) => el.getText()
                .then((text: string) => text));

textFields.forEach((description: string, index: number) => {
  if (index > 0) {
    expect(descriptions[index - 1] > description).toBe(true);
  }
});

- jlooooo

Answer 3

this.Then(/^Verify operations in with priority sorting ascending$/,function(callback){
    var sorted = [] , unSorted = [],i=0;
    var OperationPriority = element.all(by.xpath('//table/tbody/tr//dx-number-box/div/input'));
    console.log("count" +OperationPriority.count);
      OperationPriority.map((eachName) =>{
        unSorted[i] = eachName.getText();
        i++;   
    });
    sorted = unSorted.slice();
    sorted.sort(); 
    console.log(sorted);
    console.log(unSorted);
    expect(sorted).toEqual(unSorted);
callback();
});

对于 console.log(sorted); console.log(unSorted); 它会打印出两个空数组 而对于 expect(sorted).toEqual(unSorted) 则会出现错误 "not a function"

- Atati Mondal