Repository: dhsc-govuk/FingertipsNext
Pull request #273: DHSCFT-470 tidy up playwright framework
Author: login: williamwillis11
Created: 2025-03-13T16:02:34Z | Merged: 2025-03-14T10:54:25Z

# Description

Jira ticket: [DHSCFT-470](https://bjss-enterprise.atlassian.net/browse/DHSCFT-470)

## Changes

- rewrite getScenarioConfig to make it simpler
- add if statement to Cache playwright dependencies so does not run in CD as its not needed there due to CD using the playwright docker image
- extend the test level timeout from 30 seconds to 2 minutes
- for now, always upload any created test artefacts, as we currently only warn on screenshots that do not match, the test still passes but we may want to interrogate the generated screenshots.
- add waitForLoadState() check after checking each area checkbox

## Validation

playwright tests pass locally and in CI



Diff:
diff --git a/.github/workflows/e2e-tests.yml b/.github/workflows/e2e-tests.yml
index e4e22dcfd..490a663f2 100644
--- a/.github/workflows/e2e-tests.yml
+++ b/.github/workflows/e2e-tests.yml
@@ -42,7 +42,8 @@ jobs:
           cache: 'npm'
           cache-dependency-path: ${{ env.frontend-directory }}/package-lock.json
 
-      - name: Cache playwright dependencies
+      - name: Cache playwright dependencies - for CI test execution
+        if: inputs.e2e-test-container-image == null
         uses: actions/cache@v3
         id: cache
         with:
@@ -81,7 +82,6 @@ jobs:
 
       - name: Upload playwright artefacts
         uses: actions/upload-artifact@v4
-        if: failure()
         with:
           name: playwright-artefacts
           path: |
diff --git a/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-AREAS-then-check-the-charts-page-barChart-component.png b/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-AREAS-then-check-the-charts-page-barChart-component.png
deleted file mode 100644
index f7d7f4c69..000000000
Binary files a/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-AREAS-then-check-the-charts-page-barChart-component.png and /dev/null differ
diff --git a/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-AREAS-then-check-the-charts-page-lineChart-component.png b/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-AREAS-then-check-the-charts-page-lineChart-component.png
deleted file mode 100644
index e0c20ff16..000000000
Binary files a/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-AREAS-then-check-the-charts-page-lineChart-component.png and /dev/null differ
diff --git a/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-AREAS-then-check-the-charts-page-lineChartTable-component.png b/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-AREAS-then-check-the-charts-page-lineChartTable-component.png
deleted file mode 100644
index 016923f15..000000000
Binary files a/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-AREAS-then-check-the-charts-page-lineChartTable-component.png and /dev/null differ
diff --git a/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-PLUS-AREAS-then-check-the-charts-page-lineChart-component.png b/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-PLUS-AREAS-then-check-the-charts-page-lineChart-component.png
new file mode 100644
index 000000000..b658f8de9
Binary files /dev/null and b/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-PLUS-AREAS-then-check-the-charts-page-lineChart-component.png differ
diff --git a/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-PLUS-AREAS-then-check-the-charts-page-lineChartTable-component.png b/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-PLUS-AREAS-then-check-the-charts-page-lineChartTable-component.png
new file mode 100644
index 000000000..7e1f641f4
Binary files /dev/null and b/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-PLUS-AREAS-then-check-the-charts-page-lineChartTable-component.png differ
diff --git a/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-inequalities-component.png b/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-inequalities-component.png
index 8fc4bf651..bb96a44d3 100644
Binary files a/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-inequalities-component.png and b/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-inequalities-component.png differ
diff --git a/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-AREAS-then-check-the-charts-page-barChart-component.png b/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-AREAS-then-check-the-charts-page-barChart-component.png
deleted file mode 100644
index 299cc9c97..000000000
Binary files a/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-AREAS-then-check-the-charts-page-barChart-component.png and /dev/null differ
diff --git a/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-AREAS-then-check-the-charts-page-lineChart-component.png b/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-AREAS-then-check-the-charts-page-lineChart-component.png
deleted file mode 100644
index 5cf0fe919..000000000
Binary files a/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-AREAS-then-check-the-charts-page-lineChart-component.png and /dev/null differ
diff --git a/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-AREAS-then-check-the-charts-page-lineChartTable-component.png b/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-AREAS-then-check-the-charts-page-lineChartTable-component.png
deleted file mode 100644
index 37ba8c21b..000000000
Binary files a/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-AREAS-then-check-the-charts-page-lineChartTable-component.png and /dev/null differ
diff --git a/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-PLUS-AREAS-then-check-the-charts-page-lineChart-component.png b/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-PLUS-AREAS-then-check-the-charts-page-lineChart-component.png
new file mode 100644
index 000000000..278e60b1a
Binary files /dev/null and b/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-PLUS-AREAS-then-check-the-charts-page-lineChart-component.png differ
diff --git a/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-PLUS-AREAS-then-check-the-charts-page-lineChartTable-component.png b/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-PLUS-AREAS-then-check-the-charts-page-lineChartTable-component.png
new file mode 100644
index 000000000..cbd433346
Binary files /dev/null and b/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-PLUS-AREAS-then-check-the-charts-page-lineChartTable-component.png differ
diff --git a/frontend/fingertips-frontend/playwright.config.ts b/frontend/fingertips-frontend/playwright.config.ts
index f02c43d1d..ab4eb3d20 100644
--- a/frontend/fingertips-frontend/playwright.config.ts
+++ b/frontend/fingertips-frontend/playwright.config.ts
@@ -14,6 +14,7 @@ const config: PlaywrightTestConfig = {
   forbidOnly: isCI, // fails the build on CI if you accidentally left test.only in the source code
   retries: isCI ? 1 : 0,
   workers: isCI ? 2 : undefined,
+  timeout: 120_000,
   expect: {
     timeout: 10_000,
     toHaveScreenshot: {
diff --git a/frontend/fingertips-frontend/playwright/page-objects/pages/chartPage.ts b/frontend/fingertips-frontend/playwright/page-objects/pages/chartPage.ts
index 8dae30678..be54eb8e5 100644
--- a/frontend/fingertips-frontend/playwright/page-objects/pages/chartPage.ts
+++ b/frontend/fingertips-frontend/playwright/page-objects/pages/chartPage.ts
@@ -17,10 +17,12 @@ export default class ChartPage extends BasePage {
   readonly backLink = 'chart-page-back-link';
   static readonly lineChartComponent = 'lineChart-component';
   static readonly lineChartTableComponent = 'lineChartTable-component';
-  static readonly barChartComponent = 'barChart-component';
   static readonly populationPyramidComponent = 'populationPyramid-component';
   static readonly inequalitiesComponent = 'inequalities-component';
   static readonly thematicMapComponent = 'thematicMap-component';
+  static readonly heatMapComponent = 'heatmapChart-component';
+  static readonly barChartEmbeddedTableComponent =
+    'barChartEmbeddedTable-component';
 
   async navigateToChart() {
     await this.navigateTo('chart');
diff --git a/frontend/fingertips-frontend/playwright/page-objects/pages/resultsPage.ts b/frontend/fingertips-frontend/playwright/page-objects/pages/resultsPage.ts
index 4f6d4171b..045103f4c 100644
--- a/frontend/fingertips-frontend/playwright/page-objects/pages/resultsPage.ts
+++ b/frontend/fingertips-frontend/playwright/page-objects/pages/resultsPage.ts
@@ -183,14 +183,13 @@ export default class ResultsPage extends BasePage {
         .getByRole('checkbox');
       const checkboxCountMap = {
         [AreaMode.ONE_AREA]: 1,
-        [AreaMode.TWO_AREAS]: 2,
-        [AreaMode.THREE_PLUS_AREAS]: 3,
-        [AreaMode.ALL_AREAS_IN_A_GROUP]: await areaCheckboxList.count(),
+        [AreaMode.TWO_PLUS_AREAS]: 2,
         [AreaMode.ENGLAND_AREA]: 0, // for england we do not want to select any checkboxes
       };
       const checkboxCount = checkboxCountMap[areaMode];
       for (let i = 0; i < checkboxCount; i++) {
         await areaCheckboxList.nth(i + 1).check();
+        await this.page.waitForLoadState();
         if (i === 0 && areaMode !== AreaMode.ENGLAND_AREA) {
           await this.waitForURLToContain(defaultAreaTypeFilter);
         }
diff --git a/frontend/fingertips-frontend/playwright/testHelpers.ts b/frontend/fingertips-frontend/playwright/testHelpers.ts
index 443630608..546c4dc88 100644
--- a/frontend/fingertips-frontend/playwright/testHelpers.ts
+++ b/frontend/fingertips-frontend/playwright/testHelpers.ts
@@ -9,14 +9,12 @@ export enum SearchMode {
 
 export enum IndicatorMode {
   ONE_INDICATOR = 'ONE_INDICATOR',
-  TWO_INDICATORS = 'TWO_INDICATORS',
+  TWO_PLUS_INDICATORS = 'TWO_PLUS_INDICATORS',
 }
 
 export enum AreaMode {
   ONE_AREA = 'ONE_AREA',
-  TWO_AREAS = 'TWO_AREAS', // in the same group
-  THREE_PLUS_AREAS = 'THREE_PLUS_AREAS', // 3+ areas in a group
-  ALL_AREAS_IN_A_GROUP = 'ALL_AREAS_IN_A_GROUP',
+  TWO_PLUS_AREAS = 'TWO_PLUS_AREAS',
   ENGLAND_AREA = 'ENGLAND_AREA',
 }
 
@@ -29,75 +27,101 @@ export function getScenarioConfig(
   indicatorMode: IndicatorMode,
   areaMode: AreaMode
 ): ScenarioConfig {
-  // Enable in DHSCFT-148
-  // const defaultVisible = [this.populationPyramidComponent];
-  const defaultVisible: never[] = [];
-
-  const defaultHidden = [
+  // Define all available components
+  const allComponents = [
     ChartPage.lineChartComponent,
     ChartPage.lineChartTableComponent,
     ChartPage.inequalitiesComponent,
-    // DHSCFT-220 will implement this logic
-    // this.barChartComponent,
+    // Enable in DHSCFT-220
+    // ChartPage.inequalitiesBarChartComponent,
+    // Enable in DHSCFT-220
+    // ChartPage.inequalitiesLineChartComponent,
+    // Enable in DHSCFT-148
+    // ChartPage.populationPyramidComponent,
+    // Enable in DHSCFT-317
+    // ChartPage.thematicMapComponent,
+    // Enable in DHSCFT-143
+    // ChartPage.barChartEmbeddedTableComponent,
+    // Pending
+    // ChartPage.basicTableComponent,
+    // ChartPage.spineChartComponent,
+    // ChartPage.heatMapComponent,
   ];
 
-  // Single indicator scenarios show all charts
-  const singleIndicatorOneAreaConfig: ScenarioConfig = {
-    visibleComponents: [
+  let visibleComponents: string[] = [];
+
+  // 1 indicator, 1 area
+  if (
+    indicatorMode === IndicatorMode.ONE_INDICATOR &&
+    areaMode === AreaMode.ONE_AREA
+  ) {
+    visibleComponents = [
       ChartPage.lineChartComponent,
       ChartPage.lineChartTableComponent,
-      ChartPage.barChartComponent,
+      ChartPage.inequalitiesComponent,
+      // Enable in DHSCFT-220
+      // ChartPage.inequalitiesBarChartComponent,
+      // ChartPage.inequalitiesLineChartComponent,
       // Enable in DHSCFT-148
       // ChartPage.populationPyramidComponent,
-      ChartPage.inequalitiesComponent,
-    ],
-    hiddenComponents: [],
-  };
-
-  // Single indicator scenarios show all charts
-  const singleIndicatorTwoAreasConfig: ScenarioConfig = {
-    visibleComponents: [
-      ChartPage.barChartComponent,
+    ];
+  }
+  // 1 indicator, 2+ areas
+  else if (
+    indicatorMode === IndicatorMode.ONE_INDICATOR &&
+    areaMode === AreaMode.TWO_PLUS_AREAS
+  ) {
+    visibleComponents = [
+      // Enable in DHSCFT-148
+      // ChartPage.populationPyramidComponent,
+      // Enable in DHSCFT-317
+      // ChartPage.thematicMapComponent,
       ChartPage.lineChartComponent,
       ChartPage.lineChartTableComponent,
+      // Enable in DHSCFT-143
+      // ChartPage.barChartEmbeddedTableComponent,
+    ];
+  }
+  // 2+ indicators, England area
+  else if (
+    indicatorMode === IndicatorMode.TWO_PLUS_INDICATORS &&
+    areaMode === AreaMode.ENGLAND_AREA
+  ) {
+    visibleComponents = [
+      // Pending
+      // ChartPage.basicTableComponent,
       // Enable in DHSCFT-148
       // ChartPage.populationPyramidComponent,
-      // Enable in DHSCFT-317
-      // ChartPage.thematicMapComponent
-    ],
-    hiddenComponents: [],
-  };
-
-  // Map of the four supported scenarios, known as the core journeys, to their chart page configurations
-  const scenarioConfigs = new Map<[IndicatorMode, AreaMode], ScenarioConfig>([
-    [
-      [IndicatorMode.ONE_INDICATOR, AreaMode.ONE_AREA],
-      singleIndicatorOneAreaConfig,
-    ],
-    [
-      [IndicatorMode.ONE_INDICATOR, AreaMode.TWO_AREAS],
-      singleIndicatorTwoAreasConfig,
-    ],
-    [
-      [IndicatorMode.TWO_INDICATORS, AreaMode.TWO_AREAS],
-      { visibleComponents: defaultVisible, hiddenComponents: defaultHidden },
-    ],
-    // [
-    //   [IndicatorMode.TWO_INDICATORS, AreaMode.ENGLAND_AREA],
-    //   { visibleComponents: defaultVisible, hiddenComponents: defaultHidden },
-    // ],
-  ]);
-
-  const config = Array.from(scenarioConfigs.entries()).find(
-    ([[mode, area]]) => mode === indicatorMode && area === areaMode
-  )?.[1];
-
-  if (!config) {
+    ];
+  }
+  // 2+ indicators, 2+ areas (not England)
+  else if (
+    indicatorMode === IndicatorMode.TWO_PLUS_INDICATORS &&
+    areaMode === AreaMode.TWO_PLUS_AREAS
+  ) {
+    visibleComponents = [
+      // Pending
+      // ChartPage.spineChartComponent,
+      // ChartPage.heatMapComponent,
+      // Enable in DHSCFT-148
+      // ChartPage.populationPyramidComponent,
+    ];
+  } else {
     throw new Error(
-      `Combination of indicator mode: ${indicatorMode} + area mode: ${areaMode} is not one of the four core journeys`
+      `Combination of indicator mode: ${indicatorMode} + area mode: ${areaMode} is not supported.`
     );
   }
 
+  // Work out which components should be hidden
+  const hiddenComponents = allComponents.filter(
+    (component) => !visibleComponents.includes(component)
+  );
+
+  const config: ScenarioConfig = {
+    visibleComponents,
+    hiddenComponents,
+  };
+
   return config;
 }
 
@@ -143,7 +167,7 @@ export function returnIndicatorIDsByIndicatorMode(
   switch (indicatorMode) {
     case IndicatorMode.ONE_INDICATOR:
       return [indicators[0]];
-    case IndicatorMode.TWO_INDICATORS:
+    case IndicatorMode.TWO_PLUS_INDICATORS:
       return [indicators[0], indicators[1]];
     default:
       throw new Error('Invalid indicator mode');
diff --git a/frontend/fingertips-frontend/playwright/tests/fully_integrated_e2e_tests/core_journeys.spec.ts b/frontend/fingertips-frontend/playwright/tests/fully_integrated_e2e_tests/core_journeys.spec.ts
index f08f2e9fd..334e7b6e1 100644
--- a/frontend/fingertips-frontend/playwright/tests/fully_integrated_e2e_tests/core_journeys.spec.ts
+++ b/frontend/fingertips-frontend/playwright/tests/fully_integrated_e2e_tests/core_journeys.spec.ts
@@ -27,16 +27,16 @@ const coreTestJourneys: TestParams[] = [
   },
   {
     indicatorMode: IndicatorMode.ONE_INDICATOR,
-    areaMode: AreaMode.TWO_AREAS,
+    areaMode: AreaMode.TWO_PLUS_AREAS,
     searchMode: SearchMode.ONLY_SUBJECT,
   },
   {
-    indicatorMode: IndicatorMode.TWO_INDICATORS,
-    areaMode: AreaMode.TWO_AREAS,
+    indicatorMode: IndicatorMode.TWO_PLUS_INDICATORS,
+    areaMode: AreaMode.TWO_PLUS_AREAS,
     searchMode: SearchMode.ONLY_SUBJECT,
   },
   // {
-  //   indicatorMode: IndicatorMode.TWO_INDICATORS,
+  //   indicatorMode: IndicatorMode.TWO_PLUS_INDICATORS,
   //   areaMode: AreaMode.ENGLAND_AREA,
   //   cannot enable only area until DHSCFT-458 is actioned
   //   searchMode: SearchMode.ONLY_AREA,


Reviews:
user: login: WolfieKnee
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-14T08:06:58Z
user: login: williamwillis11
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-14T10:18:52Z
user: login: epercy-bjss
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-14T10:49:18Z

Review comments:
diff_hunk: @@ -29,75 +27,94 @@ export function getScenarioConfig(
   indicatorMode: IndicatorMode,
   areaMode: AreaMode
 ): ScenarioConfig {
-  // Enable in DHSCFT-148
-  // const defaultVisible = [this.populationPyramidComponent];
-  const defaultVisible: never[] = [];
-
-  const defaultHidden = [
+  // Define all available components
+  const allComponents = [
     ChartPage.lineChartComponent,
     ChartPage.lineChartTableComponent,
     ChartPage.inequalitiesComponent,
-    // DHSCFT-220 will implement this logic
-    // this.barChartComponent,
+    // Enable in DHSCFT-220
+    // ChartPage.inequalitiesBarChartComponent,
+    // Enable in DHSCFT-220
+    // ChartPage.inequalitiesLineChartComponent,
+    // Enable in DHSCFT-148
+    // ChartPage.populationPyramidComponent,
+    // Enable in DHSCFT-317
+    // ChartPage.thematicMapComponent,
+    // Pending
+    // ChartPage.basicTableComponent,
+    // ChartPage.spineChartComponent,
+    // ChartPage.heatMapComponent,
   ];
 
-  // Single indicator scenarios show all charts
-  const singleIndicatorOneAreaConfig: ScenarioConfig = {
-    visibleComponents: [
+  let visibleComponents: string[] = [];
+
+  // 1 indicator, 1 area
+  if (
+    indicatorMode === IndicatorMode.ONE_INDICATOR &&
+    areaMode === AreaMode.ONE_AREA
+  ) {
+    visibleComponents = [
       ChartPage.lineChartComponent,
       ChartPage.lineChartTableComponent,
-      ChartPage.barChartComponent,
+      ChartPage.inequalitiesComponent,
+      // ChartPage.inequalitiesBarChartComponent,
+      // ChartPage.inequalitiesLineChartComponent,
       // Enable in DHSCFT-148
       // ChartPage.populationPyramidComponent,
-      ChartPage.inequalitiesComponent,
-    ],
-    hiddenComponents: [],
-  };
-
-  // Single indicator scenarios show all charts
-  const singleIndicatorTwoAreasConfig: ScenarioConfig = {
-    visibleComponents: [
-      ChartPage.barChartComponent,
+    ];
+  }
+  // 1 indicator, 2+ areas
+  else if (
+    indicatorMode === IndicatorMode.ONE_INDICATOR &&
+    areaMode === AreaMode.TWO_PLUS_AREAS
+  ) {
+    visibleComponents = [
+      // Enable in DHSCFT-148
+      // ChartPage.populationPyramidComponent,
+      // Enable in DHSCFT-317
path: frontend/fingertips-frontend/playwright/testHelpers.ts
user: login: WolfieKnee
body: This should also have 'Bar chart with embedded table' - suggest confirming details with @priya-thorpe-bjss. 
created_at: 2025-03-14T08:06:56Z
author_association: CONTRIBUTOR
diff_hunk: @@ -29,75 +27,94 @@ export function getScenarioConfig(
   indicatorMode: IndicatorMode,
   areaMode: AreaMode
 ): ScenarioConfig {
-  // Enable in DHSCFT-148
-  // const defaultVisible = [this.populationPyramidComponent];
-  const defaultVisible: never[] = [];
-
-  const defaultHidden = [
+  // Define all available components
+  const allComponents = [
     ChartPage.lineChartComponent,
     ChartPage.lineChartTableComponent,
     ChartPage.inequalitiesComponent,
-    // DHSCFT-220 will implement this logic
-    // this.barChartComponent,
+    // Enable in DHSCFT-220
+    // ChartPage.inequalitiesBarChartComponent,
+    // Enable in DHSCFT-220
+    // ChartPage.inequalitiesLineChartComponent,
+    // Enable in DHSCFT-148
+    // ChartPage.populationPyramidComponent,
+    // Enable in DHSCFT-317
+    // ChartPage.thematicMapComponent,
+    // Pending
+    // ChartPage.basicTableComponent,
+    // ChartPage.spineChartComponent,
+    // ChartPage.heatMapComponent,
   ];
 
-  // Single indicator scenarios show all charts
-  const singleIndicatorOneAreaConfig: ScenarioConfig = {
-    visibleComponents: [
+  let visibleComponents: string[] = [];
+
+  // 1 indicator, 1 area
+  if (
+    indicatorMode === IndicatorMode.ONE_INDICATOR &&
+    areaMode === AreaMode.ONE_AREA
+  ) {
+    visibleComponents = [
       ChartPage.lineChartComponent,
       ChartPage.lineChartTableComponent,
-      ChartPage.barChartComponent,
+      ChartPage.inequalitiesComponent,
+      // ChartPage.inequalitiesBarChartComponent,
+      // ChartPage.inequalitiesLineChartComponent,
       // Enable in DHSCFT-148
       // ChartPage.populationPyramidComponent,
-      ChartPage.inequalitiesComponent,
-    ],
-    hiddenComponents: [],
-  };
-
-  // Single indicator scenarios show all charts
-  const singleIndicatorTwoAreasConfig: ScenarioConfig = {
-    visibleComponents: [
-      ChartPage.barChartComponent,
+    ];
+  }
+  // 1 indicator, 2+ areas
+  else if (
+    indicatorMode === IndicatorMode.ONE_INDICATOR &&
+    areaMode === AreaMode.TWO_PLUS_AREAS
+  ) {
+    visibleComponents = [
+      // Enable in DHSCFT-148
+      // ChartPage.populationPyramidComponent,
+      // Enable in DHSCFT-317
path: frontend/fingertips-frontend/playwright/testHelpers.ts
user: login: williamwillis11
body: added barChartEmbeddedTableComponent commented out in full list and this scenario list + spoken to @priya-thorpe-bjss so she is going to uncomment barChartEmbeddedTableComponent in her https://github.com/dhsc-govuk/FingertipsNext/pull/254 PR 
created_at: 2025-03-14T10:18:52Z
author_association: CONTRIBUTOR

PR comments:
user: login: sonarqubecloud[bot]
created_at: 2025-03-14T10:42:54Z
body: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=dhsc-govuk_FingertipsNext&pullRequest=273) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [1 New issue](https://sonarcloud.io/project/issues?id=dhsc-govuk_FingertipsNext&pullRequest=273&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=dhsc-govuk_FingertipsNext&pullRequest=273&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=dhsc-govuk_FingertipsNext&pullRequest=273&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=dhsc-govuk_FingertipsNext&pullRequest=273&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=dhsc-govuk_FingertipsNext&pullRequest=273&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=dhsc-govuk_FingertipsNext&pullRequest=273)


author_association: NONE