Merge pull request #313 from nationalarchives/AYR-883/visual-regressi…

…on-viewports Ayr 883/visual regression viewports
nationalarchives · Apr 3, 2024 · ee7c225 · ee7c225
2 parents 2ca1095 + 511619f
commit ee7c225
Show file tree

Hide file tree

Showing 29 changed files with 111 additions and 13 deletions.
diff --git a/...napshots/test_visual_regression/test_css_no_visual_regression/accessibility.png b/...napshots/test_visual_regression/test_css_no_visual_regression/accessibility.png
diff --git a/...tests/snapshots/test_visual_regression/test_css_no_visual_regression/browse.png b/...tests/snapshots/test_visual_regression/test_css_no_visual_regression/browse.png
diff --git a/...ots/test_visual_regression/test_css_no_visual_regression/browse_consignment.png b/...ots/test_visual_regression/test_css_no_visual_regression/browse_consignment.png
diff --git a/...napshots/test_visual_regression/test_css_no_visual_regression/browse_series.png b/...napshots/test_visual_regression/test_css_no_visual_regression/browse_series.png
diff --git a/...st_visual_regression/test_css_no_visual_regression/browse_transferring_body.png b/...st_visual_regression/test_css_no_visual_regression/browse_transferring_body.png
diff --git a/...ests/snapshots/test_visual_regression/test_css_no_visual_regression/cookies.png b/...ests/snapshots/test_visual_regression/test_css_no_visual_regression/cookies.png
diff --git a/...est_visual_regression/test_css_no_visual_regression/how_to_use_this_service.png b/...est_visual_regression/test_css_no_visual_regression/how_to_use_this_service.png
diff --git a/...ests/snapshots/test_visual_regression/test_css_no_visual_regression/privacy.png b/...ests/snapshots/test_visual_regression/test_css_no_visual_regression/privacy.png
diff --git a/...tests/snapshots/test_visual_regression/test_css_no_visual_regression/record.png b/...tests/snapshots/test_visual_regression/test_css_no_visual_regression/record.png
diff --git a/...test_visual_regression/test_css_no_visual_regression/search_results_summary.png b/...test_visual_regression/test_css_no_visual_regression/search_results_summary.png
diff --git a/...st_visual_regression/test_css_no_visual_regression/search_transferring_body.png b/...st_visual_regression/test_css_no_visual_regression/search_transferring_body.png
diff --git a/...s/snapshots/test_visual_regression/test_css_no_visual_regression/signed_out.png b/...s/snapshots/test_visual_regression/test_css_no_visual_regression/signed_out.png
diff --git a/e2e_tests/snapshots/test_visual_regression/test_css_no_visual_regression/start.png b/e2e_tests/snapshots/test_visual_regression/test_css_no_visual_regression/start.png
diff --git a/...snapshots/test_visual_regression/test_css_no_visual_regression/terms_of_use.png b/...snapshots/test_visual_regression/test_css_no_visual_regression/terms_of_use.png
diff --git a/...visual_regression/test_css_no_visual_regression_mobile/accessibility_mobile.png b/...visual_regression/test_css_no_visual_regression_mobile/accessibility_mobile.png
diff --git a/...l_regression/test_css_no_visual_regression_mobile/browse_consignment_mobile.png b/...l_regression/test_css_no_visual_regression_mobile/browse_consignment_mobile.png
diff --git a/...s/test_visual_regression/test_css_no_visual_regression_mobile/browse_mobile.png b/...s/test_visual_regression/test_css_no_visual_regression_mobile/browse_mobile.png
diff --git a/...visual_regression/test_css_no_visual_regression_mobile/browse_series_mobile.png b/...visual_regression/test_css_no_visual_regression_mobile/browse_series_mobile.png
diff --git a/...ession/test_css_no_visual_regression_mobile/browse_transferring_body_mobile.png b/...ession/test_css_no_visual_regression_mobile/browse_transferring_body_mobile.png
diff --git a/.../test_visual_regression/test_css_no_visual_regression_mobile/cookies_mobile.png b/.../test_visual_regression/test_css_no_visual_regression_mobile/cookies_mobile.png
diff --git a/...ression/test_css_no_visual_regression_mobile/how_to_use_this_service_mobile.png b/...ression/test_css_no_visual_regression_mobile/how_to_use_this_service_mobile.png
diff --git a/.../test_visual_regression/test_css_no_visual_regression_mobile/privacy_mobile.png b/.../test_visual_regression/test_css_no_visual_regression_mobile/privacy_mobile.png
diff --git a/...s/test_visual_regression/test_css_no_visual_regression_mobile/record_mobile.png b/...s/test_visual_regression/test_css_no_visual_regression_mobile/record_mobile.png
diff --git a/...gression/test_css_no_visual_regression_mobile/search_results_summary_mobile.png b/...gression/test_css_no_visual_regression_mobile/search_results_summary_mobile.png
diff --git a/...ession/test_css_no_visual_regression_mobile/search_transferring_body_mobile.png b/...ession/test_css_no_visual_regression_mobile/search_transferring_body_mobile.png
diff --git a/...st_visual_regression/test_css_no_visual_regression_mobile/signed_out_mobile.png b/...st_visual_regression/test_css_no_visual_regression_mobile/signed_out_mobile.png
diff --git a/...ts/test_visual_regression/test_css_no_visual_regression_mobile/start_mobile.png b/...ts/test_visual_regression/test_css_no_visual_regression_mobile/start_mobile.png
diff --git a/..._visual_regression/test_css_no_visual_regression_mobile/terms_of_use_mobile.png b/..._visual_regression/test_css_no_visual_regression_mobile/terms_of_use_mobile.png
diff --git a/e2e_tests/test_visual_regression.py b/e2e_tests/test_visual_regression.py
@@ -3,47 +3,145 @@
 
 
 @pytest.mark.parametrize(
-    "url,screenshot_file",
+    "url,screenshot_file,viewport",
     [
-        ("/how-to-use-this-service", "how_to_use_this_service.png"),
-        ("/terms-of-use", "terms_of_use.png"),
-        ("/privacy", "privacy.png"),
-        ("/cookies", "cookies.png"),
-        ("/accessibility", "accessibility.png"),
-        ("/signed-out", "signed_out.png"),
-        ("/", "start.png"),
-        ("/browse", "browse.png"),
+        (
+            "/how-to-use-this-service",
+            "how_to_use_this_service.png",
+            {"width": 1280, "height": 4000},
+        ),
+        ("/terms-of-use", "terms_of_use.png", {"width": 1280, "height": 4000}),
+        ("/privacy", "privacy.png", {"width": 1280, "height": 4000}),
+        ("/cookies", "cookies.png", {"width": 1280, "height": 4000}),
+        (
+            "/accessibility",
+            "accessibility.png",
+            {"width": 1280, "height": 4000},
+        ),
+        ("/signed-out", "signed_out.png", {"width": 1280, "height": 4000}),
+        ("/", "start.png", {"width": 1280, "height": 4000}),
+        ("/browse", "browse.png", {"width": 1280, "height": 4000}),
         (
             "/browse/transferring_body/8ccc8cd1-c0ee-431d-afad-70cf404ba337",
             "browse_transferring_body.png",
+            {"width": 1280, "height": 4000},
         ),
         (
             "/browse/series/8bd7ad22-90d1-4c7f-ae00-645dfd1987cc",
             "browse_series.png",
+            {"width": 1280, "height": 4000},
         ),
         (
             "/browse/consignment/a03363ac-7e7b-4b92-817e-72ba6423edd5",
             "browse_consignment.png",
+            {"width": 1280, "height": 4000},
+        ),
+        (
+            "/search_results_summary?query=a",
+            "search_results_summary.png",
+            {"width": 1280, "height": 4000},
         ),
-        ("/search_results_summary?query=a", "search_results_summary.png"),
         (
             "/search/transferring_body/8ccc8cd1-c0ee-431d-afad-70cf404ba337?query=a&sort=series-asc&search_filter=test",
             "search_transferring_body.png",
+            {"width": 1280, "height": 4000},
+        ),
+        (
+            "/record/41f94132-dbdf-43e4-a327-cc5bae432f98",
+            "record.png",
+            {"width": 1280, "height": 4000},
         ),
-        ("/record/41f94132-dbdf-43e4-a327-cc5bae432f98", "record.png"),
     ],
 )
 def test_css_no_visual_regression(
-    url, screenshot_file, aau_user_page: Page, assert_snapshot
+    url, screenshot_file, viewport, aau_user_page: Page, assert_snapshot
+):
+    """
+    Given a page in the AYR webapp
+    When an authenticated user navigates to it
+    Then it should look as expected on a desktop viewport
+
+    If any of these tests break due to intended changes to the design of the page,
+    run pytest with `--update-snapshots --headed` flags to update the stored screenshot
+    """
+    aau_user_page.set_viewport_size(viewport)
+    aau_user_page.goto(url)
+    aau_user_page.wait_for_load_state("domcontentloaded")
+    screenshot = aau_user_page.screenshot(full_page=True)
+    assert_snapshot(screenshot, name=screenshot_file)
+
+
+@pytest.mark.parametrize(
+    "url,screenshot_file,viewport",
+    [
+        (
+            "/how-to-use-this-service",
+            "how_to_use_this_service_mobile.png",
+            {"width": 390, "height": 5000},
+        ),
+        (
+            "/terms-of-use",
+            "terms_of_use_mobile.png",
+            {"width": 390, "height": 5000},
+        ),
+        ("/privacy", "privacy_mobile.png", {"width": 390, "height": 5000}),
+        ("/cookies", "cookies_mobile.png", {"width": 390, "height": 5000}),
+        (
+            "/accessibility",
+            "accessibility_mobile.png",
+            {"width": 390, "height": 5000},
+        ),
+        (
+            "/signed-out",
+            "signed_out_mobile.png",
+            {"width": 390, "height": 5000},
+        ),
+        ("/", "start_mobile.png", {"width": 390, "height": 5000}),
+        ("/browse", "browse_mobile.png", {"width": 390, "height": 5000}),
+        (
+            "/browse/transferring_body/8ccc8cd1-c0ee-431d-afad-70cf404ba337",
+            "browse_transferring_body_mobile.png",
+            {"width": 390, "height": 5000},
+        ),
+        (
+            "/browse/series/8bd7ad22-90d1-4c7f-ae00-645dfd1987cc",
+            "browse_series_mobile.png",
+            {"width": 390, "height": 5000},
+        ),
+        (
+            "/browse/consignment/a03363ac-7e7b-4b92-817e-72ba6423edd5",
+            "browse_consignment_mobile.png",
+            {"width": 390, "height": 5000},
+        ),
+        (
+            "/search_results_summary?query=a",
+            "search_results_summary_mobile.png",
+            {"width": 390, "height": 5000},
+        ),
+        (
+            "/search/transferring_body/8ccc8cd1-c0ee-431d-afad-70cf404ba337?query=a&sort=series-asc&search_filter=test",
+            "search_transferring_body_mobile.png",
+            {"width": 390, "height": 5000},
+        ),
+        (
+            "/record/41f94132-dbdf-43e4-a327-cc5bae432f98",
+            "record_mobile.png",
+            {"width": 390, "height": 5000},
+        ),
+    ],
+)
+def test_css_no_visual_regression_mobile(
+    url, screenshot_file, viewport, aau_user_page: Page, assert_snapshot
 ):
     """
     Given a page in the AYR webapp
     When an authenticated user navigates to it
-    Then it should look as expected
+    Then it should look as expected on a mobile viewport
 
     If any of these tests break due to intended changes to the design of the page,
     run pytest with `--update-snapshots --headed` flags to update the stored screenshot
     """
+    aau_user_page.set_viewport_size(viewport)
     aau_user_page.goto(url)
     aau_user_page.wait_for_load_state("domcontentloaded")
     screenshot = aau_user_page.screenshot(full_page=True)