Approved Management Plan and Park Operating Date pages

.github/workflows/playwright.yml

@@ -1,9 +1,22 @@
 name: Playwright Tests
 on:
+  workflow_dispatch:
+    inputs:
+      branch:
+        description: 'Branch to run the workflow on'
+        required: true
+        default: 'Automated-tests'
+      environment:
+        description: 'Which environment to deploy to'
+        required: true
+        default: 'staging'
+      version:
+        description: 'Version to deploy'
+        required: false
   push:
-    branches: [ main, master ]
+    branches: [ Automated-tests ]
   pull_request:
-    branches: [ main, master ]
+    branches: [ Automated-tests ]
 jobs:
   test:
     timeout-minutes: 60

.gitignore

@@ -202,3 +202,7 @@ bcparks.ca-scrape.laccdb
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

package.json

@@ -6,12 +6,14 @@
   "directories": {
     "doc": "docs"
   },
-  "scripts": {},
+  "scripts": {
+    "test": "playwright test"
+  },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@playwright/test": "^1.44.1",
+    "@playwright/test": "^1.45.0",
     "@types/node": "^20.14.1"
   }
 }

playwright.config.js

@@ -11,6 +11,7 @@ const { defineConfig, devices } = require('@playwright/test');
  * @see https://playwright.dev/docs/test-configuration
  */
 module.exports = defineConfig({
+  timeout: 100000,
   testDir: './tests',
   /* Run tests in files in parallel */
   fullyParallel: true,
@@ -19,7 +20,7 @@ module.exports = defineConfig({
   /* Retry on CI only */
   retries: process.env.CI ? 2 : 0,
   /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 1 : undefined,
+  workers: process.env.CI ? 4 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: 'html',
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
@@ -41,13 +42,13 @@ module.exports = defineConfig({
     {
       name: 'firefox',
       use: { ...devices['Desktop Firefox'] },
-    },
-
+    }
+/*
     {
       name: 'webkit',
       use: { ...devices['Desktop Safari'] },
     },
-
+*/
     /* Test against mobile viewports. */
     // {
     //   name: 'Mobile Chrome',

tests/all_advisories_page.spec.js

@@ -0,0 +1,95 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('All advisories page tests', ()=>{
+
+    const baseURL = 'https://bcparks.ca/';
+    const activeAdvisoriesURL = 'https://bcparks.ca/active-advisories/';
+    // const { chromium } = require('@playwright/test');
+    const customTimeout = 90000;
+
+    test.beforeEach(async ({page})=>{
+        await page.goto(baseURL);
+    });
+
+    test('Navigate to active advisories page', async ({page})=>{
+        await page.waitForLoadState('networkidle');
+        await page.getByText('See all advisories').click();
+        await expect(page).toHaveURL(baseURL + 'active-advisories/');
+        await expect(page).toHaveTitle('Active advisories | BC Parks');
+    });
+
+    test('Verify the breadcrumbs are visible and working', async ({page})=>{
+        await page.goto(activeAdvisoriesURL);
+        await page.waitForLoadState('networkidle');
+        await expect(page.getByRole('link', { name: 'Home'})).toBeVisible();
+        await page.getByRole('link', {name: 'Home'}).click();
+        await expect(page).toHaveURL(baseURL);
+    });
+
+    test('Verify the h1 is visible', async ({page}) =>{
+        await page.goto(activeAdvisoriesURL);
+        await page.waitForLoadState('networkidle');
+        await expect(page.locator('h1', {name : 'Active advisories'})).toBeVisible();
+    });
+
+    test('Verify the Event search is working', async ({page}) =>{
+        await page.goto(activeAdvisoriesURL);
+        await page.waitForLoadState('networkidle');
+        await page.getByLabel('Select an event').click();
+        await page.getByLabel('Select an event').fill('Avalanche', { customTimeout });
+        await page.getByLabel('Avalanche', { exact: true }).click();
+        await page.getByRole('button', { name: 'Search' }).click();
+        await expect(page.locator('h1', {name : 'Active advisories | Avalanche'})).toBeVisible();
+        await page.getByLabel('Clear').click();
+        await expect(page.getByLabel('Select an event')).toBeEmpty();
+        await page.getByLabel('Select an event').fill('Fire');
+        await page.getByLabel('Wildfire', { exact: true }).click();
+        await page.getByRole('button', {name :  'Search'}).click();
+        await expect(page.locator('h1', {name : 'Active advisories | Fire'})).toBeVisible();
+    });
+
+    test('Verify the search filters are working', async ({page})=>{
+        await page.goto(activeAdvisoriesURL);
+        await page.waitForLoadState('networkidle');
+        await page.getByRole('checkbox').nth(1).check();
+        await page.getByRole('textbox', {name : 'Search'}).fill('Babine');
+        await page.getByRole('button', {name : 'Search'}).click();
+    });
+
+    test('Verify the park safety advisories legend is visible', async ({page}) =>{
+        await page.goto(activeAdvisoriesURL);
+        await page.waitForLoadState('networkidle');
+        const highAdvisoryLegendItem = page.locator('.advisory-legend-item').first();
+        const mediumAdvisoryLegendItem = page.locator('.advisory-legend-item').nth(1);
+        const lowAdvisoryLegendItem = page.locator('.advisory-legend-item').nth(2);
+
+        await page.goto(activeAdvisoriesURL);
+        await page.waitForLoadState('networkidle');
+        await expect(highAdvisoryLegendItem).toBeVisible();
+        await expect(highAdvisoryLegendItem).toHaveText('HighImmediate danger and closures');
+        await expect(highAdvisoryLegendItem.locator('.legend-icon').first()).toBeVisible();
+        await expect(highAdvisoryLegendItem.locator('.legend-icon').first()).toHaveCSS('background-color', 'rgb(216, 41, 47)');
+        await expect(mediumAdvisoryLegendItem).toBeVisible();
+        await expect(mediumAdvisoryLegendItem).toHaveText('MediumSafety and health related');
+        await expect(mediumAdvisoryLegendItem.locator('.legend-icon').first()).toBeVisible();
+        await expect(mediumAdvisoryLegendItem.locator('.legend-icon').first()).toHaveCSS('background-color', 'rgb(252, 186, 25)');
+        await expect(lowAdvisoryLegendItem).toBeVisible();
+        await expect(lowAdvisoryLegendItem).toHaveText('LowDiscretion and warnings');
+        await expect(lowAdvisoryLegendItem.locator('.legend-icon').first()).toBeVisible();
+        await expect(lowAdvisoryLegendItem.locator('.legend-icon').first()).toHaveCSS('background-color', 'rgb(36, 100, 164)');
+    });
+
+    test('Check that all links redirect to the correct pages', async ({page}) =>{
+        await page.goto(activeAdvisoriesURL);
+        await page.waitForLoadState('networkidle');
+        await page.getByRole('link', { name: 'BC Wildfire Service', exact: true }).click();
+        await expect(page).toHaveURL('https://www2.gov.bc.ca/gov/content/safety/wildfire-status');
+        await page.goBack();
+        await page.getByRole('link', { name: 'BC River Forecast Centre' }).click();
+        await expect(page).toHaveURL('https://www2.gov.bc.ca/gov/content/environment/air-land-water/water/drought-flooding-dikes-dams/river-forecast-centre');
+        await page.goBack();
+        await page.locator('a:nth-child(5)').click();
+        await expect(page).toHaveURL('https://drivebc.ca/');
+    });
+});
+

tests/approved_management_plan.spec.js

@@ -0,0 +1,100 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Approved management plan tests', ()=>{
+
+    const baseURL = 'https://bcparks.ca/';
+    const approvedManagementPlanURL = 'https://bcparks.ca/about/management-plans/approved/';
+
+    test.beforeEach(async ({page})=>{
+        await page.goto(baseURL);   
+    });
+
+    test('Check that we can get to the page from homepage', async ({page})=>{
+        await page.waitForLoadState('networkidle');     
+        await page.getByRole('menuitem', { name: 'About' }).click();
+        await expect(page.locator('#home div').filter({ hasText: 'Main Menu BackAboutOur' }).nth(4)).toBeVisible();
+        await expect(page.getByRole('menuitem', { name: 'About', exact: true })).toBeVisible();
+        await page.getByRole('menuitem', { name: 'Management plans' }).click();
+        await expect(page.getByRole('menuitem', { name: 'Management plans', exact: true })).toBeVisible();
+        await page.getByRole('menuitem', { name: 'Approved management plans' }).click();
+        await expect(page).toHaveURL(baseURL + 'about/management-plans/approved/');
+        await expect(page).toHaveTitle('Approved management plans | BC Parks');
+        await expect(page.locator('h1', { name: 'Approved management plans'})).toBeVisible();
+    });
+
+    test('Check the breadcrumbs displayed', async ({page})=>{
+        await page.waitForLoadState('networkidle');     
+        await expect (page.locator('#main-content')).toBeVisible();
+        await page.goto(approvedManagementPlanURL);
+        await page.getByRole('link', { name: 'Home' }).click();
+        await expect(page).toHaveURL(baseURL);
+        await page.goBack();
+        await page.waitForLoadState('networkidle'); 
+        await page.getByRole('link', { name: 'About' }).click();
+        await expect(page).toHaveURL(baseURL + 'about/');
+        await page.goBack();
+        await page.waitForLoadState('networkidle'); 
+        await page.getByRole('link', { name: 'Management plans', exact: true }).click();
+        await expect(page).toHaveURL(baseURL + 'about/management-plans/');
+        await page.goBack();
+        await page.waitForLoadState('networkidle'); 
+        await expect(page.getByLabel('breadcrumb').getByText('Approved management plans')).toBeVisible();
+    });
+
+    test('Check the filter menu is present and in default setting', async ({page})=>{
+        await page.waitForLoadState('networkidle');
+        await page.getByRole('menuitem', { name: 'About' }).click();
+        await page.getByRole('menuitem', { name: 'Management plans' }).click();
+        await page.getByRole('menuitem', { name: 'Approved management plans' }).click();     
+        await expect(page.getByRole('heading', { name: 'Filter' })).toBeVisible();
+
+        const allButton = page.getByRole('button', { name: 'All'});
+        await expect(allButton).toBeVisible();
+        await expect(allButton).toHaveClass('btn btn-selected--true');
+
+        const letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U','V', 'W', 'X', 'Y', 'Z']
+
+        for(const letter of letters){
+            const button = page.getByLabel(letter, { exact: true});
+            await expect(button).toBeVisible();
+            await expect(button).toHaveClass('btn btn-selected--false');
+        };
+
+        // Check the letter headings are visible
+        for (const letter of letters){
+            const heading = page.getByRole('heading', { name: letter, exact: true});
+            await expect(heading).toBeVisible();
+        };
+    });
+
+    test('Check the filters work and list updates', async ({page})=>{
+        await page.waitForLoadState('networkidle');     
+        await page.getByRole('menuitem', { name: 'About' }).click();
+        await page.getByRole('menuitem', { name: 'Management plans' }).click();
+        await page.getByRole('menuitem', { name: 'Approved management plans' }).click();    
+        // Check the default state
+        const allButton = page.getByRole('button', { name: 'All'});
+        await expect(allButton).toBeVisible();
+        await expect(allButton).toHaveClass('btn btn-selected--true');
+
+        const letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U','V', 'W', 'X', 'Y', 'Z']
+
+        // For every letter click on the filter, state of the filter should change
+        for(const letter of letters){
+            const button = page.getByLabel(letter, { exact: true});
+            const heading = page.getByRole('heading', { name: letter, exact: true});
+            await button.click();
+            await expect(heading).toBeVisible();
+            await expect(allButton).toHaveClass('btn btn-selected--false');
+            await expect(button).toHaveClass('btn btn-selected--true');
+
+    // Check that if the letter is not selected, then the headings should not be displayed
+            for (const otherLetter of letters){
+                if(otherLetter !== letter){
+                    const otherHeading = page.getByRole('heading', { name: otherLetter, exact: true });
+                    await expect(otherHeading).not.toBeVisible();
+                }
+            }
+        }
+    });
+});

tests/find_a_park_page.spec.js

@@ -0,0 +1,40 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Find a park page tests', async ()=>{
+    const baseURL = 'https://bcparks.ca/';
+    const customTimeout = { timeout: 90000 };
+
+    test.beforeEach(async ({page})=>{
+        page.goto(baseURL);
+    });
+
+    test('Go to the find a park page', async ({page})=>{
+        await page.waitForLoadState('networkidle');
+        await page.getByRole('menuitem', { name: 'Find a park' }, customTimeout).click();
+        await expect(page).toHaveURL(baseURL + 'find-a-park/');
+        await expect(page).toHaveTitle('Find a park | BC Parks');
+    });
+
+    test('Search for a park and redirect to the park page', async ({page})=>{
+        await page.waitForLoadState('networkidle');
+        await page.getByLabel('By park name').click();
+        await page.getByLabel('By park name').fill('joffres');
+        await page.getByLabel('Search').click();
+        await page.getByRole('link', { name: 'Joffre Lakes Park' }, customTimeout).click();
+        await expect(page).toHaveURL(baseURL + 'joffre-lakes-park/');
+        await expect(page).toHaveTitle('Joffre Lakes Park | BC Parks');
+    });
+
+    test('Check the filter headings are present', async ({page})=>{
+        await page.getByRole('menuitem', { name: 'Find a park' }).click();
+        await page.waitForLoadState('networkidle');
+        await expect(page.getByRole('heading', { name: 'Filter' })).toBeVisible();
+        await expect(page.getByText('Popular')).toBeVisible();
+        await expect(page.getByText('Area', { exact: true })).toBeVisible();
+        await expect(page.getByRole('group', { name: 'Camping' }).locator('legend')).toBeVisible();
+        await expect(page.getByText('Activities', { exact: true })).toBeVisible();
+        await expect(page.getByText('Facilities')).toBeVisible();
+        await expect(page.getByRole('heading', { name: 'More ways to find a park' })).toBeVisible();
+    });
+});
+