Screenshot testing

For future students of the "Python QA Engineer" course we have prepared an author's article.



We also invite you to an open webinar on
Continuous Integration with Jenkins. Let's look at how to set up automatic test run, install plugins and create backups of assembly configurations.






! python, selenium, Pillow.





? (~1000) python, pytest, selenium, , , ( browserup proxy), :  





, , ( ). 





, selenium’a , , . 





, selenium :





:





from selenium.webdriver import Chrome
from collections import Counter

driver = Chrome()
driver.get("https://go.mail.ru/search?q=%D1%86%D0%B2%D0%B5%D1%82%D0%BE%D1%87%D0%BA%D0%B8%20%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8")
elements = driver.find_elements_by_css_selector(".SmackPicturesContent-smackImageItem")
print(Counter([el.is_displayed() for el in elements]))
driver.quit()
      
      



Counter({True: 10})



, 10, , , «» , - . 





(visibility_of, visibility_of_all_elements_located



, etc), is_displayed











pytest selenium, , . , , — . . 





:





  • , ( , );





  • , , , ;





  • , ;





  • 4040 , .





, , .





.





:





def test_search_block(self):
   self.driver.get("https://go.mail.ru/")

   def action():
       self.driver.find_element_by_xpath("//span[contains(text(), '')]").click()

   self.check_by_screenshot((By.CSS_SELECTOR, ".MainPage-verticalLinksWrapper"), action=action)
      
      



action



, .





, . .





:





  :









  1. — , svg. «» :





RED = "red"
GREEN = "green"
BLUE = "blue"
ALPHA = "alpha"

# https://github.com/rsmbl/Resemble.js/blob/dec5ae1cf1d10c9027a94400a81c17d025a9d3b6/resemble.js#L121
# https://github.com/rsmbl/Resemble.js/blob/dec5ae1cf1d10c9027a94400a81c17d025a9d3b6/resemble.js#L981
tolerance = {
   RED: 32,
   GREEN: 32,
   BLUE: 32,
   ALPHA: 32,
}
      
      



def _is_color_similar(self, a, b, color):
   """  .  ,       

    self.tolerance.
   """
   if a is None and b is None:
       return True

   diff = abs(a - b)

   if diff == 0:
       return True
   elif diff < self.tolerance[color]:
       return True

   return False
      
      



Resemble.js. , . «» , - .





, , :





def test_search_block(self):
   self.driver.get("https://go.mail.ru/")

   def action():
       element = self.driver.find_element_by_xpath("//span[contains(text(), '')]")
       self.driver.execute_script("arguments[0].remove()", element)

   self.check_by_screenshot((By.CSS_SELECTOR, ".MainVerticalsNav-listItemActive"), action=action)
      
      



, , ..





  1. . , — - . — .





  2. — .  , , ( ).





  3. ( ) . :





def _get_raw_coords_by_locator(self, locator_type, query_string):
   """   ."""
   wait = WebDriverWait(self.driver, timeout=10, ignored_exceptions=Exception)
   wait.until(lambda _: self.driver.find_element(locator_type, query_string).is_displayed(),
                   message="   ,   ")
  
   el = self.driver.find_element(locator_type, query_string)
   location = el.location
   size = el.size
   x = location["x"]
   y = location["y"]
   width = location["x"] + size['width']
   height = location["y"] + size['height']
   return x, y, width, height
      
      



:





def _get_coords_by_locator(self, locator_type, query_string) -> Tuple[int, int, int, int]:
   x, y, width, height = self._get_raw_coords_by_locator(locator_type, query_string)
   return x * self.pixel_ratio, y * self.pixel_ratio, width * self.pixel_ratio, height * self.pixel_ratio
      
      



, , .





, :





from selenium.webdriver import Chrome, ChromeOptions

options = ChromeOptions()
options.add_experimental_option("mobileEmulation", {'deviceName': "Nexus 5"})
options.add_argument('--headless')
caps = options.to_capabilities()
driver = Chrome(desired_capabilities=caps)
driver.get("https://go.mail.ru/")
print(driver.find_element_by_xpath("//body").size)
driver.save_screenshot("test.png")
driver.quit()
      
      



: {'height': 640, 'width': 360}



.





1080 1920:





❯ file test.png
test.png: PNG image data, 1080 x 1920, 8-bit/color RGBA, non-interlaced
      
      



4. . , ( ). : , , . 





~570 - ( ). 20 , 15 . , , — 2-3%. - , . , - (, , ).  





:





  1. https://blog.rinatussenov.com/automating-manual-visual-regression-tests-with-python-and-selenium-be66be950196





  2. https://www.youtube.com/watch?v=crbwyGlcXm0






«Python QA Engineer».





« Jenkins».








All Articles