Large-scale emotional drama Selenium: 9_selenium cooperates with Pillow to complete partial browser screenshots

Webpage screenshot

Last time I mentioned the four screenshot methods of selenium, and finally took a screenshot of the entire web page. But many times, we only need to screenshot part of the content. For example, intercepting certain key information, or taking screenshots of verification codes that are no longer common (now all are clicked according to rules…). So how do we take screenshots of some elements? Today we will give an example…
Yesterday, the editor of 51test contacted me and said that he hoped that I could contribute a post about testing to the website. It was required that it be related to testing and the length of the article should be more than 1,000 words.
I immediately flipped through the home page of the short book, which contained 54 articles with 52,300 words. Except for the few irritating posts I wrote before, the word count seems to be up to standard. But in addition to studying, I am already very tired from summarizing articles to the public account, and I really can’t bear the energy of submitting articles… So today I will do an exercise through selenium and Pillow, and take a screenshot of the content in the red box.

Code analysis

To take a partial screenshot, first after logging in to the normal web page, we need to locate this frame, F12 to see how to locate it:
We can locate this element through driver.find_element_by_class_name(main-top’).
Then two methods need to be introduced next

element.location

Get the position of element, the return value is an x, y coordinate point:

{x’: 486, y’: 86}

element.size

Get the element size of element, which is the length and width. This is easier to understand:

{height’: 119, width’: 625}

Draw the ground as a prison

We know x, y, height, and width, how can we frame the four corners of this element? Use the following picture to illustrate:
Then what we have to do now is to cut out the relevant images.

Image cropping

There are many libraries for Python to operate images, but the most classic one is Pillow.

Pillow installation

Enter at the command line: pip instlal Pillow

Cut code

To cut the code, we only need to introduce the Image submodule from Pillow, and then use the crop method to achieve it. The code is as follows:

img = Image.open('screenshort.png')
title = img.crop((left, top, right, bottom))
title.save('title.png')

Final implementation

Code:

# -*- coding: utf-8 -*-
# @Author: Wang Xiang
# @JianShu: QingfengPython
# @Date : 2019/7/15 23:24
# @Software : PyCharm
# @version: Python 3.7.3
# @File : SaveLongPicture.py

import os
from selenium import webdriver
from PIL import Image


class SaveLongPicture:
    # Qingfeng Python personal homepage
    BaseUrl = "https://www.jianshu.com/u/d23fd5012bed"
    # Script directory
    BaseDir = os.path.dirname(os.path.realpath(__file__))

    def __init__(self):
        self.driver = self.init_driver()
        self.long_picture = os.path.join(self.BaseDir, 'BreezePython.png')

    @staticmethod
    def init_driver():
        options = webdriver.ChromeOptions()
        options.add_argument('--start-maximized')
        options.add_argument('disable-infobars')
        return webdriver.Chrome(options=options)

    def prepare_work(self):
        self.driver.get(self.BaseUrl)
        self.driver.add_cookie(cookie)
        self.driver.refresh()
        self.base_handle = self.driver.current_window_handle

    def add_cookie(self):
        self.driver.get(self.BaseUrl)
        self.driver.add_cookie(cookie)
        self.driver.refresh()

    def save_crop_img(self):
        self.driver.get(self.BaseUrl)
        # Position element
        title = self.driver.find_element_by_class_name('main-top')
        #Print element position and element size
        print(title.location, title.size)
        # save Picture
        self.driver.get_screenshot_as_file(self.long_picture)
        # Get element parameters
        left = title.location.get('x')
        top = title.location.get('y')
        right = title.size.get('width') + left
        bottom = title.size.get('height') + top
        # Read pictures
        img = Image.open(self.long_picture)
        # Image cropping
        title = img.crop((left, top, right, bottom))
        # Save locally
        title.save('title.png')


def run():
    # Instantiation method
    start_test = SaveLongPicture()
    # cookie login
    start_test.add_cookie()
    # Crop image
    start_test.save_crop_img()


if __name__ == '__main__':
    cookie = {
        'name': 'remember_user_token',
        'value': ('...')
    }
    run()

Some people may ask, why add cookies when it can be accessed directly? Unsightly… When not logged in, the displayed message is wrapped…


Of course, you can take a screenshot of this element without logging in, which is absolutely fine, but Virgos have obsessive-compulsive disorder…

The End

Today’s selenium content is updated here. If you find this article helpful to you, you can click “Reading” in the lower right corner of the article.
Welcome to share this article or my WeChat public account [Qingfeng Python] with more people who like python. Thank you for your support…

Author: Qingfeng Python

The knowledge points of the article match the official knowledge files, and you can further learn relevant knowledge. Python entry skill treeWeb crawlerSelenium361102 people are learning the system