Break down percy.io tests into multiple snapshots

Author: Xing Han Lu

tests/IntegrationTests.py

@@ -22,8 +22,7 @@ def percy_snapshot(self, name=''):
             snapshot_name = '{} - {}'.format(name, sys.version_info)
 
             self.percy_runner.snapshot(
-                name=snapshot_name,
-                enable_javascript=True
+                name=snapshot_name
             )
 
     @classmethod
@@ -39,7 +38,8 @@ def setUpClass(cls):
 
         if os.environ.get('PERCY_ENABLED', False):
             loader = percy.ResourceLoader(webdriver=cls.driver)
-            cls.percy_runner = percy.Runner(loader=loader)
+            percy_config = percy.Config(default_widths=[1280])
+            cls.percy_runner = percy.Runner(loader=loader, config=percy_config)
             cls.percy_runner.initialize_build()
 
     @classmethod
@@ -53,15 +53,16 @@ def tearDownClass(cls):
     def setUp(self):
         pass
 
-    def tearDown(self):
+    def tearDown(self, port=8050):
         time.sleep(3)
         if platform.system() == 'Windows':
-            requests.get('http://localhost:8050/stop')
+            requests.get('http://localhost:{}/stop'.format(port))
+            sys.exit()
         else:
             self.server_process.terminate()
         time.sleep(3)
 
-    def startServer(self, app):
+    def startServer(self, app, port=8050):
         if 'DASH_TEST_PROCESSES' in os.environ:
             processes = int(os.environ['DASH_TEST_PROCESSES'])
         else:
@@ -71,7 +72,7 @@ def run():
             app.scripts.config.serve_locally = True
             app.css.config.serve_locally = True
             app.run_server(
-                port=8050,
+                port=port,
                 debug=False,
                 processes=processes
             )
@@ -87,9 +88,9 @@ def _stop_server_windows():
                 return 'stop'
 
             app.run_server(
-                port=8050,
+                port=port,
                 debug=False,
-                threaded=True
+                threaded=False
             )
 
         # Run on a separate process so that it doesn't block
@@ -105,5 +106,5 @@ def _stop_server_windows():
         time.sleep(5)
 
         # Visit the dash page
-        self.driver.get('http://localhost:8050')
+        self.driver.get('http://localhost:{}'.format(port))
         time.sleep(0.5)

tests/test_percy_snapshot.py

@@ -1,8 +1,11 @@
 import base64
-import dash
-import dash_html_components as html
 import os
+import time
+
 from .IntegrationTests import IntegrationTests
+import dash
+import dash_html_components as html
+import dash_core_components as dcc
 from selenium.webdriver.common.by import By
 from selenium.webdriver.support.ui import WebDriverWait
 from selenium.webdriver.support import expected_conditions as EC
@@ -31,28 +34,46 @@ def encode(name):
                 encoded_string = base64.b64encode(image_file.read())
             return "data:image/png;base64," + encoded_string.decode('ascii')
 
-        def image_section(name):
-            return html.Div([
-                html.P(name),
-                html.Img(src=encode(name))
-            ])
-
-        asset_list = os.listdir(os.path.join(
-            os.path.dirname(__file__),
-            'screenshots'
-        ))
-
+        # Define the app
         app = dash.Dash(__name__)
 
         app.layout = html.Div([
-            image_section(name)
-            for name in asset_list if name.endswith('png')
+            # represents the URL bar, doesn't render anything
+            dcc.Location(id='url', refresh=False),
+            # content will be rendered in this element
+            html.Div(id='page-content')
         ])
 
+        @app.callback(dash.dependencies.Output('page-content', 'children'),
+                      [dash.dependencies.Input('url', 'pathname')])
+        def display_image(pathname):
+            """
+            Assign the url path to return the image it represent. For example,
+            to return "usage.png", you can visit localhost/usage.png.
+            :param pathname: name of the screenshot, prefixed with "/"
+            :return: An html.Img object containing the base64 encoded image
+            """
+            if pathname:
+                name = pathname.replace('/', '')
+                return html.Img(id=name, src=encode(name))
+
+        # Start the app
         self.startServer(app)
 
-        WebDriverWait(self.driver, 30).until(
-            EC.presence_of_element_located((By.CSS_SELECTOR, "img"))
-        )
+        # Find the names of all the screenshots
+        asset_list = os.listdir(os.path.join(
+            os.path.dirname(__file__),
+            'screenshots'
+        ))
+
+        # Run Percy
+        for image in asset_list:
+            if image.endswith('png'):
+                self.driver.get('http://localhost:8050/{}'.format(image))
+
+                WebDriverWait(self.driver, 20).until(
+                    EC.presence_of_element_located((By.ID, image))
+                )
 
-        self.percy_snapshot(name='Snapshot of all usage apps')
+                self.percy_snapshot(name=image)
+                time.sleep(2)