test: add SinglelinePage tests (hasadna#393)

src/test_pages/BasePage.ts

@@ -9,9 +9,9 @@ export abstract class BasePage {
     })
   }
 
-  protected async clickOnElement(element: Locator) {
+  protected async clickOnElement(element: Locator, timeout?: number) {
     await test.step(`Click on ${element}`, async () => {
-      await element.click()
+      await element.click({ timeout: timeout || 0 })
     })
   }
 
@@ -21,6 +21,18 @@ export abstract class BasePage {
     })
   }
 
+  protected async clearTextFromElement(element: Locator) {
+    await test.step(`Clearing '${element}' from text`, async () => {
+      await element.clear()
+    })
+  }
+
+  protected async verifySelectionVisible(locator: Locator, isVisible: boolean, timeout?: number) {
+    isVisible
+      ? await expect(locator).toBeVisible({ timeout: timeout || 5000 })
+      : await expect(locator).toBeHidden({ timeout: timeout || 5000 })
+  }
+
   protected async selectFrom_UL_LI_Dropbox(
     dropElement: Locator,
     optionsListElement: Locator,

src/test_pages/SinglelinePage.ts

@@ -0,0 +1,76 @@
+import { Locator, Page, test } from '@playwright/test'
+import { BasePage } from './BasePage'
+
+export default class SinglinePage extends BasePage {
+  private date: Locator
+  private operator: Locator
+  private operators_dropdown: Locator
+  private operators_list: Locator
+  private line_number: Locator
+  private close_line_number: Locator
+  private route_select: Locator
+  private hours_list: Locator
+  private hours_dropdown: Locator
+
+  constructor(protected page: Page) {
+    super(page)
+    this.date = this.page.locator('label').filter({ hasText: 'תאריך' })
+    this.operator = this.page.locator('#operator-select')
+    this.line_number = this.page.locator('label').filter({ hasText: 'מספר קו' })
+    this.close_line_number = this.page.locator("span[aria-label='close']")
+    this.route_select = this.page.locator('#route-select')
+    this.operators_dropdown = this.page.locator('#operator-select')
+    this.operators_list = this.page.locator('ul#operator-select-listbox')
+    this.hours_dropdown = this.page.getByLabel('Open').nth(2)
+    this.hours_list = this.page.locator('ul#start-time-select-listbox')
+  }
+
+  public async selectOperatorFromDropbox(operatorName: string) {
+    await this.selectFrom_UL_LI_Dropbox(this.operators_dropdown, this.operators_list, operatorName)
+  }
+
+  public async verifyOperatorExistsInDropbox(operatorName: string) {
+    await test.step(`Verifying ${operatorName} is in dropbox`, async () => {
+      await this.page.locator('ul#operator-select li').filter({ hasText: operatorName }).isVisible()
+    })
+  }
+
+  public async openOperatorSelection() {
+    await this.clickOnElement(this.operators_dropdown)
+  }
+
+  public async openHoursSelection() {
+    await this.clickOnElement(this.hours_dropdown, 5000)
+  }
+
+  public async fillLineNumber(lineNumber: string) {
+    await this.fillTextToElement(this.line_number, lineNumber)
+  }
+
+  public async closeLineNumber() {
+    await this.clickOnElement(this.close_line_number)
+  }
+
+  public async verifyRouteSelectionVisible(isVisible: boolean) {
+    await this.verifySelectionVisible(this.route_select, isVisible)
+  }
+
+  public async selectRandomRoute() {
+    await this.clickOnElement(this.route_select)
+    const options = this.page.locator('ul#route-select-listbox li')
+    const optionsCount = await options.count()
+    const randomIndex = Math.floor(Math.random() * optionsCount)
+
+    await test.step(`Selecting route ${randomIndex} out of ${optionsCount}`, async () => {
+      await options.nth(randomIndex).scrollIntoViewIfNeeded()
+      await options.nth(randomIndex).click()
+    })
+  }
+
+  public async changeDate(newDate: string) {
+    await test.step(`Changing date to: ${newDate}`, async () => {
+      await this.clearTextFromElement(this.date)
+      await this.fillTextToElement(this.date, newDate)
+    })
+  }
+}

tests/singlelineTest.spec.ts

@@ -1,11 +1,42 @@
-import { test } from './utils'
-
-test('single line', async ({ page }) => {
-  await page.route('**stride-api**', (route) => route.abort())
-  await page.route('*.png', (route) => route.abort())
-  await page.goto('/')
-  await page.getByText('מפה לפי קו').click()
-  await page.getByPlaceholder('לדוגמא: 17א').fill('1')
-  await page.getByLabel('חברה מפעילה').click()
-  await page.getByRole('option', { name: 'אגד', exact: true }).click()
+import { getYesterday, test } from './utils'
+import SinglelinePage from '../src/test_pages/SinglelinePage'
+
+test.describe('Single line page tests', () => {
+  let singleLinePage: SinglelinePage
+  const yesterday = getYesterday() // we set the date to yesterday so we dont get the edge case of buses not loading at 12AM
+
+  test.beforeEach(async ({ page }) => {
+    singleLinePage = new SinglelinePage(page)
+    await page.goto('/')
+    await page.getByText('מפה לפי קו').click()
+  })
+
+  test('Test single line operator company options are selectable', async () => {
+    await singleLinePage.changeDate(yesterday)
+    await singleLinePage.openOperatorSelection()
+    await singleLinePage.verifyOperatorExistsInDropbox('אגד')
+  })
+
+  test('Test "choose route" dropdown appears after selecting line', async () => {
+    await singleLinePage.changeDate(yesterday)
+    await singleLinePage.selectOperatorFromDropbox('אגד')
+    await singleLinePage.fillLineNumber('1')
+    await singleLinePage.verifyRouteSelectionVisible(true)
+  })
+
+  test('Test "choose route" dropdown disappears after removing line', async () => {
+    await singleLinePage.changeDate(yesterday)
+    await singleLinePage.selectOperatorFromDropbox('אגד')
+    await singleLinePage.fillLineNumber('1')
+    await singleLinePage.verifyRouteSelectionVisible(true)
+    await singleLinePage.closeLineNumber()
+    await singleLinePage.verifyRouteSelectionVisible(false)
+  })
+
+  test('Test "choose route" options are selectable', async () => {
+    await singleLinePage.changeDate(yesterday)
+    await singleLinePage.selectOperatorFromDropbox('אגד')
+    await singleLinePage.fillLineNumber('1')
+    await singleLinePage.selectRandomRoute()
+  })
 })

tests/utils.ts

@@ -2,6 +2,7 @@
 import * as fs from 'fs'
 import * as path from 'path'
 import * as crypto from 'crypto'
+import moment from 'moment'
 import { test as baseTest } from 'playwright-advanced-har'
 
 const istanbulCLIOutput = path.join(process.cwd(), '.nyc_output')
@@ -34,4 +35,10 @@ export const test = baseTest.extend({
   },
 })
 
+export function getYesterday(): string {
+  const yesterday = moment().subtract(1, 'days')
+  const formattedDate = yesterday.format('DD/MM/YYYY')
+  return formattedDate
+}
+
 export const expect = test.expect