Skip to content

Commit b7cbb39

Browse files
committed
Refactor automated visual/layout testing code
1 parent e074df8 commit b7cbb39

File tree

3 files changed

+49
-1
lines changed

3 files changed

+49
-1
lines changed

examples/visual_testing/ReadMe.md

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
### Automated Visual/Layout Testing
2+
3+
The purpose of automated visual/layout testing is to help you determine when something has changed the layout of a web page. Rather than comparing screenshots, a more effective way is to compare HTML tags at different points in time on the same web page. If a change is detected, it could mean that something broke on the webpage, or it might be something harmless like a website redesign or dynamic content loading on the web page. To handle automated visual/layout testing, SeleniumBase uses the ``self.check_window()`` method, which can set visual baselines for comparison and then compare the latest versions of web pages to the existing baseline.
4+
5+
The first time a test calls ``self.check_window()`` for a unique "name" parameter provided, it will set a visual baseline, meaning that it creates a folder, saves the URL to a file, saves the current window screenshot to a file, and creates the following three files with the listed data saved:
6+
* tags_level1.txt -> HTML tags from the window
7+
* tags_level2.txt -> HTML tags + attributes from the window
8+
* tags_level3.txt -> HTML tags + attributes/values from the window
9+
10+
Baseline folders are named based on the test name and the name parameter passed to ``self.check_window()``. The same test can store multiple baseline folders.
11+
12+
If the baseline is being set/reset, the "level" doesn't matter.
13+
14+
After the first run of ``self.check_window()``, it will compare the HTML tags of the latest window to the one from the initial run.
15+
Here's how the level system works:
16+
* level=0 ->
17+
DRY RUN ONLY - Will perform a comparison to the baseline, and
18+
print out any differences that are found, but
19+
won't fail the test even if differences exist.
20+
* level=1 ->
21+
HTML tags are compared to tags_level1.txt
22+
* level=2 ->
23+
HTML tags are compared to tags_level1.txt and
24+
HTML tags/attributes are compared to tags_level2.txt
25+
* level=3 ->
26+
HTML tags are compared to tags_level1.txt and
27+
HTML tags + attributes are compared to tags_level2.txt and
28+
HTML tags + attributes/values are compared to tags_level3.txt
29+
30+
As shown, Level-3 is the most strict, Level-1 is the least strict. If the comparisons from the latest window to the existing baseline don't match, the current test will fail, except for Level-0 tests.
31+
32+
You can reset the visual baseline on the command line by using:
33+
``--visual_baseline``
34+
As long as ``--visual_baseline`` is used on the command line while running tests, the ``self.check_window()`` method cannot fail because it will rebuild the visual baseline rather than comparing the html tags of the latest run to the existing baseline. If there are any expected layout changes to a website that you're testing, you'll need to reset the baseline to prevent unnecessary failures.
35+
36+
``self.check_window()`` will fail with "Page Domain Mismatch Failure" if the page domain doesn't match the domain of the baseline.
37+
38+
If you want to use ``self.check_window()`` to compare a web page to a later version of itself from within the same test run, you can add the parameter ``baseline=True`` to the first time you call ``self.check_window()`` in a test to use that as the baseline. This only makes sense if you're calling ``self.check_window()`` more than once with the same name parameter in the same test.
39+
40+
Automated Visual/Layout Testing with ``self.check_window()`` is not very effective for websites that have dynamic content that changes the layout and structure of web pages. For those, you're much better off using regular SeleniumBase functional testing.
41+
42+
Example usage:
43+
```
44+
self.check_window(name="testing", level=0)
45+
self.check_window(name="xkcd_home", level=1)
46+
self.check_window(name="github_page", level=2)
47+
self.check_window(name="wikipedia_page", level=3)
48+
```

examples/visual_testing/__init__.py

Whitespace-only changes.

examples/visual_test.py renamed to examples/visual_testing/layout_test.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
from seleniumbase import BaseCase
22

33

4-
class AutomatedVisualTest(BaseCase):
4+
class VisualLayoutTest(BaseCase):
55

66
def test_applitools_helloworld(self):
77
self.open('https://applitools.com/helloworld?diff1')

0 commit comments

Comments
 (0)