Udemy Playwright: Web Automation Testing From Zero to Hero: Difference between revisions
Jump to navigation
Jump to search
Udemy Playwright: Web Automation Testing From Zero to Hero (view source)
Revision as of 21:48, 28 May 2024
, 28 May→Date Picker
m (→Checkboxes) |
m (→Date Picker) |
||
| Line 548: | Line 548: | ||
=== Date Picker === | === Date Picker === | ||
<nowiki> | |||
test("Date Picker", async ({ page }) => { | |||
await page.getByText("Forms").click() | |||
await page.locator(".menu-item").getByText("Datepicker").click() | |||
const calendarInputfield = page.getByPlaceholder("Form Picker") | |||
await calendarInputfield.click() | |||
await page.getByPlaceholder("Form Picker").click() | |||
let date = new Date() | |||
date.setDate(date.getDate() + 500) | |||
const expectedDate = date.getDate().toString() | |||
const expectedMonthShort = date.toLocaleString("En-US", { month: "short" }) | |||
const expectedMonthLong = date.toLocaleString("En-US", { month: "long" }) | |||
const expectedYear = date.getFullYear() | |||
const formattedDate = `${expectedMonthShort} ${expectedDate}, ${expectedYear}` | |||
let calendarMonthAndYear = await page | |||
.locator("nb-calendar-view-mode") | |||
.textContent() | |||
const expectedMonthAndYear = ` ${expectedMonthLong} ${expectedYear} ` | |||
while (!calendarMonthAndYear.includes(expectedMonthAndYear)) { | |||
await page.locator(".next-month").click() | |||
// await page.locator('nb-calendar-pageable-navigation [data-name="chevron-right"]').click() | |||
calendarMonthAndYear = await page | |||
.locator("nb-calendar-view-mode") | |||
.textContent() | |||
} | |||
await page | |||
.locator('[class="day-cell ng-star-inserted"]') | |||
.getByText(expectedDate, { exact: true }) | |||
.click() | |||
await expect(calendarInputfield).toHaveValue(formattedDate) | |||
})</nowiki> | |||
Notes: | |||
* be careful when adding to a date, it may wrap to the next month | |||
* things I don't quite like here | |||
** all the date string variables, and using the <code>expected</code> prefixes | |||
** this check "sometimes" checks the next month button. but not always - these should be two separate checks (test cases) | |||
** the code duplication for <code>calendarMonthAndYear = ...</code> | |||
** the course uses <code>'nb-calendar-pageable-navigation [data-name="chevron-right"]'</code> when <code>".next-month"</code> is cleaner and more readable | |||
** the while loop is dangerous, it assumes that <code>calendarMonthAndYear.includes(expectedMonthAndYear)</code> will be true at some point. | |||
:::Consider what would happen if the format of the displayed text is changed (eg. the developer changes it to use a short month...) | |||
:::I think a for loop with conditional exit break would be better, | |||
:::and using two separate checks, for short month, and then year, would be more resilient. | |||
With suggested changes | |||
<nowiki> | |||
test("Date Picker", async ({ page }) => { | |||
await page.getByText("Forms").click() | |||
await page.locator(".menu-item").getByText("Datepicker").click() | |||
const calendarInputfield = page.getByPlaceholder("Form Picker") | |||
await calendarInputfield.click() | |||
await page.getByPlaceholder("Form Picker").click() | |||
let selectDate = new Date() | |||
const addDays = 500 | |||
selectDate.setDate(selectDate.getDate() + addDays) | |||
const selectDayOfMonth = selectDate.getDate().toString() // value of "1" to "31" | |||
const selectMonth = selectDate.toLocaleString("En-US", { month: "short" }) | |||
const selectYear = selectDate.getFullYear().toString() | |||
const formattedSelectDate = `${selectMonth} ${selectDayOfMonth}, ${selectYear}` | |||
for (let i = 0; i < addDays / 28; i++) { // divide by shortest month | |||
let calendarMonthAndYear = await page | |||
.locator("nb-calendar-view-mode") | |||
.textContent() | |||
if ( | |||
calendarMonthAndYear.includes(selectMonth) && | |||
calendarMonthAndYear.includes(selectYear) | |||
) { | |||
break | |||
} else { | |||
await page.locator(".next-month").click() | |||
} | |||
} | |||
await page | |||
.locator('[class="day-cell ng-star-inserted"]') | |||
.getByText(selectDayOfMonth, { exact: true }) | |||
.click() | |||
// locator has to be exact match, partial matches would include days from prev and next months | |||
await expect(calendarInputfield).toHaveValue(formattedSelectDate) | |||
})</nowiki> | |||
=== Sliders === | === Sliders === | ||
=== Drag & Drop with iFrames === | === Drag & Drop with iFrames === | ||