如何验证表的列数据是否按名称排序

Question

我有一个项目，我想做一些排序。当用户单击列名时，数据应按名称排序显示。

是否可以在柏树使用POM?

Answer 1

可以从页面中提取列数据，然后对其进行排序。之后，点击应用程序排序按名称和匹配。

下面是一个简化的例子。

cy.get('.selector-to-get-column-data')
.then(($el) => {
// use lodash .map() to get innerText of each element
// then sort the array
return Cypress._.map($el, "innerText").sort();
})
.as("sortedArray")
// action to sort column
cy.get("@sortedArray").then((sortedArray) => {
cy.get(".selector-to-get-column-data")
.then(($el) => {
// use lodash .map() to get innerText of each element
// then sort the array
return Cypress._.map($el, "innerText").sort();
})
.then(cy.log)
.should("deep.equal", sortedArray);
})

Answer 2

您可以创建一个数组，其中所有元素以小写字母排序。然后，在排序之后，从列中提取每个文本，并将其与数组元素进行匹配。

cy.get('selector').click() //To trigger the sorting
//Save the sorted texts in a array
const sortedTexts = ['apple', 'ball', 'cat', 'dice']
//Loop over column texts and match it agains the sortedTexts
cy.get('column-selector').each(($ele, index) => {
expect($ele.text().toLowercase().trim()).to.equal(sortedTexts[index])
})

如果你有一个动态列表，你可以创建两个数组，一个在排序之前，一个在排序之后，然后比较这两个数组，像这样:

var beforeSort = []
var afterSort = []
cy.get('column-selector').each(($ele) => {
beforeSort.push($ele.text().trim())
})
cy.get('selector').click() //To trigger the sorting
cy.get('column-selector').each(($ele) => {
afterSort.push($ele.text().trim())
}).then(() => {
expect(beforeSort.sort()).to.eq(afterSort)
})