1  import { type Page, expect, test } from '@playwright/test'
  2  
  3  const goToFirstSnapshotAndExpanSomeWidgets = async ({
  4    projectName,
  5    page
  6  }: {
  7    page: Page
  8  
  9    projectName: string
 10  }) => {
 11    await page.goto('/')
 12    await page.getByRole('link', { name: projectName, exact: true }).click()
 13    await page.getByRole('tab', { name: 'Reports', exact: true }).click()
 14    await page.getByRole('link', { name: 'View', exact: true }).first().click()
 15    await page.waitForLoadState('networkidle')
 16  
 17    const Details = page.getByRole('button', { name: 'Details', exact: true })
 18  
 19    const DetailsCount = await Details.count()
 20  
 21    if (DetailsCount === 0) {
 22      return
 23    }
 24  
 25    await expect(Details.first()).toBeVisible()
 26  
 27    await Details.first().click()
 28    await page.waitForLoadState('networkidle')
 29  
 30    if (DetailsCount > 1) {
 31      await Details.nth(1).click()
 32      await page.waitForLoadState('networkidle')
 33    }
 34  
 35    if (DetailsCount > 2) {
 36      await Details.last().click()
 37      await page.waitForLoadState('networkidle')
 38    }
 39  
 40    await page.waitForTimeout(1000)
 41  }
 42  
 43  const VisualTestSnapshot = async ({
 44    page,
 45    projectName
 46  }: {
 47    page: Page
 48    projectName: string
 49  }) => {
 50    await goToFirstSnapshotAndExpanSomeWidgets({
 51      page,
 52      projectName
 53    })
 54  
 55    await expect(page).toHaveScreenshot({ fullPage: true, maxDiffPixels: 150 })
 56  }
 57  
 58  const goToSnapshotsList = async ({
 59    projectName,
 60    page
 61  }: {
 62    page: Page
 63    projectName: string
 64  }) => {
 65    await page.goto('/')
 66    await page.getByRole('link', { name: projectName }).click()
 67    await page.getByRole('tab', { name: 'Reports' }).click()
 68    await page.waitForLoadState('networkidle')
 69  }
 70  
 71  const VisualTestSnapshotsList = async ({
 72    page,
 73    projectName
 74  }: {
 75    page: Page
 76    projectName: string
 77  }) => {
 78    await goToSnapshotsList({
 79      page,
 80      projectName
 81    })
 82  
 83    await expect(page).toHaveScreenshot({ fullPage: true, maxDiffPixels: 150 })
 84  }
 85  
 86  const VisualTestDashboard = async ({ page, projectName }: { page: Page; projectName: string }) => {
 87    await page.goto('/')
 88    await page.getByRole('link', { name: projectName }).click()
 89    await page.waitForLoadState('networkidle')
 90    await expect(page).toHaveScreenshot({ fullPage: true, maxDiffPixels: 150 })
 91  }
 92  
 93  const BikesDemoProjectName = 'Demo project - Bikes'
 94  
 95  /////////////////////
 96  ///   Home
 97  /////////////////////
 98  
 99  test('Home', async ({ page }) => {
100    await page.goto('/')
101    await page.waitForLoadState('networkidle')
102    await expect(page).toHaveScreenshot({ fullPage: true, maxDiffPixels: 150 })
103  })
104  
105  /////////////////////
106  ///  Shapshots List
107  /////////////////////
108  
109  for (const project of [BikesDemoProjectName]) {
110    test(`Reports List: ${project}`, async ({ page }) => {
111      await VisualTestSnapshotsList({ page, projectName: project })
112    })
113  }
114  
115  /////////////////////
116  ///   Dashboards
117  /////////////////////
118  
119  for (const project of [BikesDemoProjectName]) {
120    test(`Dashboard: ${project}`, async ({ page }) => {
121      await VisualTestDashboard({ page, projectName: project })
122    })
123  }
124  
125  /////////////////////
126  ///   Snapshots
127  /////////////////////
128  
129  for (const project of [BikesDemoProjectName]) {
130    test(`Report: ${project}`, async ({ page }) => {
131      await VisualTestSnapshot({ page, projectName: project })
132    })
133  }