列表
正如您在使用，开发，测试的几乎每个应用程序中已经看到的那样，列表是非常常见的Web元素。菜单，下拉菜单和类似选择是Web应用程序的常见组件。
- 信息有关列表动作的更多信息：
select
testing lists
each
所以，让我们为列表编写一些测试：
1：在e2e/elements_manipulation下创建一个新的测试文件，例如，lists.cy.js。
2：在内部写下以下测试：
/// <reference types="Cypress" />
describe('Lists: Lists actions', () => {
beforeEach('Navigate to lists page', () => {
cy.visit('/select-menu');
});
it('Check selection of all list options - select method - colors menu', () => {
// Load colors fixure json file to assert if all colors are present
cy.fixture('colors').then((colors) => {
// Get all options in the menu, get each option and indexes
cy.get('#oldSelectMenu option').each((option, index) => {
// Get option text
const optionText = option.text();
// Select each option and assert that it has correct option value and text
cy.get('#oldSelectMenu')
.select(optionText)
.should('have.value', option.val())
.contains(colors[index]);
});
});
});
it('Check selection of single list option - click method - title menu', () => {
// Click on dropdown
cy.get('#selectOne').click();
// Select one option
cy.get('#react-select-3-option-0-4').click();
// Assert that dropdown has correct text after selection
cy.get('#selectOne').contains('Prof.');
});
});
3：在cypress/fixtures文件夹中删除example.json文件，并创建名为colors.json的新文件。在其中写下以下数据。
{
"0": "Red",
"1": "Blue",
"2": "Green",
"3": "Yellow",
"4": "Purple",
"5": "Black",
"6": "White",
"7": "Voilet",
"8": "Indigo",
"9": "Magenta",
"10": "Aqua"
}
代码说明：
在我们的测试文件中，我们首先访问我们的应用程序页面，专门用于测试列表，每个测试开始启动page。
- 在第一个测试用例中，测试主题是带有颜色的菜单（旧样式选择菜单）。我们想测试菜单中每个选项的值和文本。
第10行：我们将整个动作/断言用一个固定装置包裹，因为我们想加载并使用其内容（来自colors.json文件）进行颜色结果断言。 （加载一次，而不是每次断言，这就是为什么我们在选择循环之外称其为何称为。）
第12行：我们将获得下拉选项，对于每个选项，我们都将获得其值和索引。
第14行：对于每个选项，我们都会得到文本（红色，蓝色等）
第16-17行：我们使用的是柏树选项select()，而不是click()来选择每个值，我们能够使用它，因为此元素在DOM中具有选择标签。因为我们在循环内部，所以这不会一次选择所有选项，而是一个接一个。
第18-19行：对于每个选项选择，我们都声称它包含适当的值和索引的颜色与我们的固定文件内容（颜色名称）匹配，以该特定顺序匹配。
- 在第二个测试用例中，我们只想在标题菜单中选择一个选项。在此特定示例中，我们可以使用
select()函数，因为此应用程序不为此菜单提供选择标签。在这里无需循环，因为我们只想检查一个选项。
第26行：我们单击菜单以打开它。
第28行：我们在菜单中单击一个选项。
第30行：我们声称菜单元素具有我们选择的选择。
信息有关固定装置的更多信息：fixtures
¹信息您还可以在测试中使用不同类型的JS循环：loops
ð了解循环逻辑非常重要。作为撰写测试自动化的人，您通常会出现在列表，表等中必须测试不同选项的情况，因此循环是避免代码重复并使测试执行更快的绝佳方法。
日期选择器
日期选择器元素让用户选择日期或日期范围。它们通常被绑在输入字段上。现在，我们知道如何通过按钮，输入字段和列表执行操作，让我们编写一些日期选择器测试，这些测试是我们以前学到的内容的组合。
1：在e2e/elements_manipulation下创建一个新的测试文件，并将其称为datepicker.cy.js。在内部写下以下测试。
/// <reference types="Cypress" />
describe('Date picker: Date picker actions', () => {
beforeEach('Navigate to date picker page', () => {
cy.visit('/date-picker');
});
it('Check fixed date selection', () => {
// Open date picker
cy.get('#datePickerMonthYearInput').click();
// Select year
cy.get('.react-datepicker__year-select').select('2030');
// Select month
cy.get('.react-datepicker__month-select').select('June');
// Select day
cy.get(`.react-datepicker__day--0${23}`).first().click();
// Assert input date value
cy.get('#datePickerMonthYearInput').should('have.value', '06/23/2030');
});
it('Check dynamic date selection', () => {
// Increment Date by 1 month
const date = new Date();
date.setMonth(date.getMonth() + 1);
// Set date to 23rd day of next month
const year = date.getFullYear();
const month = date.getMonth();
const day = 23;
// Open date picker
cy.get('#datePickerMonthYearInput').click();
// Select year
cy.get('.react-datepicker__year-select').select(`${year}`);
// Select month
cy.get('.react-datepicker__month-select').select(`${month}`);
// Select day
cy.get(`.react-datepicker__day--0${day}`).first().click();
// Assert input date value
cy.get('#datePickerMonthYearInput').should(
'have.value',
`${`${month + 1}`.padStart(2, '0')}/${day}/${year}`
);
});
it('Check applying date value directly in the input field', () => {
// Clear date input and type new date
cy.get('#datePickerMonthYearInput').clear().type('06/23/2030');
// Assert input date value
cy.get('#datePickerMonthYearInput').should('have.value', '06/23/2030');
});
});
代码说明：
在我们的测试文件中，我们首先访问我们的应用程序页面，专用于测试日期选择器，然后每个测试开始page。
- 测试1 （我们选择固定的日期值）：
第10行：首先，我们单击日期选择器输入以打开它。
第12行：我们正在选择一年的固定值。
第14行：我们正在选择当月的固定值。
第16行：我们正在为日期选择固定值，并在第一个选择日期时显示下一个/上个月的重复值。
第18行：我们正在断言日期输入具有新值 - 我们选择的值。
- 测试2 （我们正在动态选择日期）：
第23行：我们正在启动日期对象。
第24行：我们将日期对象设置为一个月，以始终从本月提高1个月。
第26行：我们从日期对象开始一年
第27行：我们从日期对象开始一个月
第28行：我们正在创建常数以用作一天的值
第30行：我们正在开放日期选择器
第32-36行：我们正在选择年，月，日期选择器
第38-41行：我们声称日期输入具有我们为日期设置的正确值。由于从日期对象和下拉值开始的一个月索引不同，我们将1添加到一个月，如果值小于10，则添加0，以尊重日期输入字段的格式。
- 测试3 （我们直接在输入字段中插入固定日期值，而无需选择）：
第46行：我们正在从输入字段中清除默认值，并且正在键入一个新的固定值。
第48行：我们声称该日期输入具有新值 - 我们所选的值。
ð总是建议不要将固定值用于日期，因为一旦通过该日期，测试将失败。取决于项目的用例。只要可能使用计算，动态值和本机JS日期对象或其他库，例如moment.js。我们在这里仅出于学习目的有固定的示例，熟悉如何与日期选择器进行交互的多种方式。
â·S了解更多有关JS日期对象的信息：date objects
家庭作业：
-
添加更多方案，这些方案将在我们的列表页面上查看其他列表，或者我们的演示应用程序中的其他下拉列表。玩选择和断言。尝试自动化多选列表。
-
添加更多的日期选择器方案。尝试使用左/右箭头导航在不同的月份进行导航。尝试使包含时间的第二次选择器自动化。播放时间计算。
不要忘记推动您今天在github-记得git命令上所做的一切吗？
git add .
git commit -am "add: lists, date pickers tests"
git push
在第7课！
中见Completed code for this lesson
如果您学到了新知识，请随时购买咖啡来支持我的工作。
