Skip to content

Commit

Permalink
Added a high contrast mode to screenshot cases.
Browse files Browse the repository at this point in the history
Thank you to Sarah Abderemane and Nick Pope for the reviews.
  • Loading branch information
sarahboyce committed May 2, 2024
1 parent 8c257ce commit bfc2de1
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 10 deletions.
20 changes: 20 additions & 0 deletions django/test/selenium.py
Expand Up @@ -191,6 +191,26 @@ def dark(self):
finally:
self.selenium.execute_script("localStorage.removeItem('theme');")

def set_emulated_media(self, features, media=""):
if self.browser != "chrome":
self.skipTest("Emulated media controls are only supported on Chrome.")
# Chrome Dev Tools Protocol Emulation.setEmulatedMedia
# https://chromedevtools.github.io/devtools-protocol/1-3/Emulation/#method-setEmulatedMedia
self.selenium.execute_cdp_cmd(
"Emulation.setEmulatedMedia", {"media": media, "features": features}
)

@contextmanager
def high_contrast(self):
self.set_emulated_media(features=[{"name": "forced-colors", "value": "active"}])
with self.desktop_size():
try:
yield
finally:
self.set_emulated_media(
features=[{"name": "forced-colors", "value": "none"}]
)

def take_screenshot(self, name):
if not self.screenshots:
return
Expand Down
11 changes: 6 additions & 5 deletions docs/internals/contributing/writing-code/unit-tests.txt
Expand Up @@ -278,24 +278,25 @@ For testing changes to the admin UI, the selenium tests can be run with the
To define when screenshots should be taken during a selenium test, the test
class must use the ``@django.test.selenium.screenshot_cases`` decorator with a
list of supported screenshot types (``"desktop_size"``, ``"mobile_size"``,
``"small_screen_size"``, ``"rtl"``, and ``"dark"``). It can then call
``self.take_screenshot("unique-screenshot-name")`` at the desired point to
generate the screenshots. For example::
``"small_screen_size"``, ``"rtl"``, ``"dark"``, and ``"high_contrast"``). It
can then call ``self.take_screenshot("unique-screenshot-name")`` at the desired
point to generate the screenshots. For example::

from django.test.selenium import SeleniumTestCase, screenshot_cases
from django.urls import reverse


class SeleniumTests(SeleniumTestCase):
@screenshot_cases(["desktop_size", "mobile_size", "rtl", "dark"])
@screenshot_cases(["desktop_size", "mobile_size", "rtl", "dark", "high_contrast"])
def test_login_button_centered(self):
self.selenium.get(self.live_server_url + reverse("admin:login"))
self.take_screenshot("login")
...

This generates multiple screenshots of the login page - one for a desktop
screen, one for a mobile screen, one for right-to-left languages on desktop,
and one for the dark mode on desktop.
one for the dark mode on desktop, and one for high contrast mode on desktop
when using chrome.

.. versionchanged:: 5.1

Expand Down
10 changes: 5 additions & 5 deletions tests/admin_views/tests.py
Expand Up @@ -5764,7 +5764,7 @@ def setUp(self):
title="A Long Title", published=True, slug="a-long-title"
)

@screenshot_cases(["desktop_size", "mobile_size", "rtl", "dark"])
@screenshot_cases(["desktop_size", "mobile_size", "rtl", "dark", "high_contrast"])
def test_login_button_centered(self):
from selenium.webdriver.common.by import By

Expand Down Expand Up @@ -6070,7 +6070,7 @@ def test_populate_existing_object(self):
self.assertEqual(slug1, "this-is-the-main-name-the-best-2012-02-18")
self.assertEqual(slug2, "option-two-this-is-the-main-name-the-best")

@screenshot_cases(["desktop_size", "mobile_size", "dark"])
@screenshot_cases(["desktop_size", "mobile_size", "dark", "high_contrast"])
def test_collapsible_fieldset(self):
"""
The 'collapse' class in fieldsets definition allows to
Expand All @@ -6093,7 +6093,7 @@ def test_collapsible_fieldset(self):
)
self.take_screenshot("expanded")

@screenshot_cases(["desktop_size", "mobile_size", "rtl", "dark"])
@screenshot_cases(["desktop_size", "mobile_size", "rtl", "dark", "high_contrast"])
def test_selectbox_height_collapsible_fieldset(self):
from selenium.webdriver.common.by import By

Expand Down Expand Up @@ -6121,7 +6121,7 @@ def test_selectbox_height_collapsible_fieldset(self):
)
self.take_screenshot("selectbox-collapsible")

@screenshot_cases(["desktop_size", "mobile_size", "rtl", "dark"])
@screenshot_cases(["desktop_size", "mobile_size", "rtl", "dark", "high_contrast"])
def test_selectbox_height_not_collapsible_fieldset(self):
from selenium.webdriver.common.by import By

Expand Down Expand Up @@ -6152,7 +6152,7 @@ def test_selectbox_height_not_collapsible_fieldset(self):
)
self.take_screenshot("selectbox-non-collapsible")

@screenshot_cases(["desktop_size", "mobile_size", "rtl", "dark"])
@screenshot_cases(["desktop_size", "mobile_size", "rtl", "dark", "high_contrast"])
def test_first_field_focus(self):
"""JavaScript-assisted auto-focus on first usable form field."""
from selenium.webdriver.common.by import By
Expand Down

0 comments on commit bfc2de1

Please sign in to comment.