Chore: [AEA-4513] - Set up header (#190)

## Summary

- Routine Change

### Details

added tests for the header and menu links

Author: seansteberisal

features/cpts_ui/home_page.feature

@@ -8,6 +8,17 @@ Feature: I can visit the Clinical Prescription Tracker Service Website
 
   @allure.tms:https://nhsd-jira.digital.nhs.uk/browse/AEA-4515
   Scenario: user can see the footer
-    When I go to the homepage
-    Then I am on the homepage
-    And I can see the footer
+    Given I am on the homepage
+    Then I can see the footer
+
+  @allure.tms:https://nhsd-jira.digital.nhs.uk/browse/AEA-4513
+  Scenario: user can see the header
+    Given I am on the homepage
+    Then I can see the header
+    And I can see the links on the header
+
+  @allure.tms:https://nhsd-jira.digital.nhs.uk/browse/AEA-4513
+  Scenario: user sees a menu with links when the screen size is small
+    Given I am on the homepage
+    When I have a screen size of 900 pixels wide
+    Then I can see the header links in a dropdown menu

features/environment.py

@@ -118,9 +118,7 @@ def before_all(context):
     if product == "CPTS-UI":
         global _page
         playwright = sync_playwright().start()
-        browser = playwright.chromium.launch(
-            headless=True, slow_mo=1000, channel="chrome"
-        )
+        browser = playwright.chromium.launch(headless=True, channel="chrome")
         context.page = browser.new_page()
         _page = context.page
         set_page(context, _page)

features/steps/cpts_ui_home_page_steps.py

@@ -1,5 +1,5 @@
 # pylint: disable=no-name-in-module
-from behave import when, then  # pyright: ignore [reportAttributeAccessIssue]
+from behave import given, when, then  # pyright: ignore [reportAttributeAccessIssue]
 from pages.home_page import HomePage
 
 
@@ -8,8 +8,15 @@ def goto_page(context):
     context.page.goto(context.cpts_ui_base_url + "site/")
 
 
-@then("I am on the homepage")
+@given("I am on the homepage")
 def verify_on_page(context):
+    goto_page(context)
+    home_page = HomePage(context.page)
+    home_page.verify_header_link()
+
+
+@then("I am on the homepage")
+def verify_on_home_page(context):
     home_page = HomePage(context.page)
     home_page.verify_header_link()
 
@@ -18,3 +25,26 @@ def verify_on_page(context):
 def i_can_see_the_footer(context):
     home_page = HomePage(context.page)
     home_page.verify_footer_is_visible()
+
+
+@then("I can see the header")
+def i_can_see_the_header(context):
+    home_page = HomePage(context.page)
+    home_page.verify_header_is_visible()
+
+
+@then("I can see the links on the header")
+def i_can_see_the_links_on_the_header(context):
+    home_page = HomePage(context.page)
+    home_page.verify_header_links_large_view()
+
+
+@when("I have a screen size of {pixel_width} pixels wide")
+def i_have_a_screen_size_of_x_pixels_wide(context, pixel_width):
+    context.page.set_viewport_size({"width": int(pixel_width), "height": 1200})
+
+
+@then("I can see the header links in a dropdown menu")
+def i_can_see_the_header_links_in_a_dropdown_menu(context):
+    home_page = HomePage(context.page)
+    home_page.verify_header_links_900_pixels_wide_view()

pages/home_page.py

@@ -5,12 +5,44 @@ class HomePage:
 
     def __init__(self, page: Page):
         self.page = page
+        self.header = "NHS LogoClinical prescription"
         self.footer = "[id='eps_footer']"
+        self.eps_header_placeholder1 = "eps_header_placeholder1"
+        self.eps_header_placeholder2 = "eps_header_placeholder2"
+        self.eps_header_placeholder3 = "eps_header_placeholder3"
+        self.eps_header_confirmRoleLink = "eps_header_confirmRoleLink"
+        self.menu_button = "Browse Menu"
 
     def verify_header_link(self):
         expect(
             self.page.get_by_role("link", name="Clinical prescription")
         ).to_be_visible()
 
+    def verify_header_is_visible(self):
+        expect(self.page.get_by_text(self.header)).to_be_visible()
+
     def verify_footer_is_visible(self):
         self.page.is_visible(self.footer)
+
+    def verify_header_links_large_view(self):
+        expect(self.page.get_by_test_id(self.eps_header_placeholder1)).to_be_visible()
+        expect(self.page.get_by_test_id(self.eps_header_placeholder2)).to_be_visible()
+        expect(self.page.get_by_test_id(self.eps_header_placeholder3)).to_be_visible()
+        expect(
+            self.page.get_by_test_id(self.eps_header_confirmRoleLink)
+        ).to_be_visible()
+
+    def verify_header_links_900_pixels_wide_view(self):
+        expect(self.page.get_by_role("button", name=self.menu_button)).to_be_visible()
+        self.page.get_by_role("button", name=self.menu_button).click()
+        expect(
+            self.page.get_by_test_id(self.eps_header_confirmRoleLink)
+        ).to_be_visible()
+        expect(self.page.get_by_test_id(self.eps_header_placeholder3)).to_be_visible()
+        self.page.get_by_role("button", name=self.menu_button).click()
+        expect(self.page.get_by_test_id(self.eps_header_confirmRoleLink)).to_be_visible(
+            visible=False
+        )
+        expect(self.page.get_by_test_id(self.eps_header_placeholder3)).to_be_visible(
+            visible=False
+        )