首页 > 解决方案 > 使用 Django/Selenium 测试多个视口大小

问题描述

在给定不同视口大小和 CSS 中定义的媒体的情况下,我正在尝试测试某些 UI 元素的特性。我有一个设置函数来实例化无头 Chrome 浏览器,我相信默认视口大小为 800x600:

class NewDesktopVisitorTest(StaticLiveServerTestCase):

    def setUp(self):
        self.chrome_options = Options()
        self.chrome_options.add_argument('--headless')
        self.browser = webdriver.Chrome(options=self.chrome_options)

这对于测试我认为的桌面版页面非常有效,但我还想确保移动版按照我的预期呈现。我可以使用不同的设置创建一个完全独立的类,并指定视口大小,如下所示:

class NewMobileVisitorTest(StaticLiveServerTestCase):

    def setUp(self):
        self.chrome_options = Options()
        self.chrome_options.add_argument('--headless')
        self.chrome_options.add_argument('--window-size=375,800')
        self.browser = webdriver.Chrome(options=self.chrome_options)

这样做的好处是可以非常清楚地显示给定测试失败的地方(即桌面或移动)。问题是我希望对两个(可能还有多个)视口大小运行完全相同的测试,并且我不想在多个类中维护完全相同的测试。

我对参数化测试的大部分搜索都会产生针对不同数据集运行相同测试的解决方案,但我还没有找到针对多个启动配置设置和运行相同测试的解决方案示例。

我很犹豫(虽然不是不愿意)切换到不同的测试框架或安装额外的包只是为了解决这个特定的情况。

有没有人找到解决这个问题的直接方法?

标签: pythoncssdjangoseleniumtesting

解决方案


for我在一个循环中运行我不同的大小来迭代一个list窗口大小,所以我不必再次编写相同的测试。

XS = [320, 568]
SM = [568, 320]
MD = [768, 1024]
LG = [1024, 768]
XL = [1200, 750]

WINDOW_SIZES = [XS, SM, MD, LG, XL]

# Loops through all of the sizes.
for window in WINDOW_SIZES:

    # Set the window size       [320,568], etc...
    driver.set_window_size(window[0],window[1])

    # Load the page you want to test.
    driver.get('mypage')

    # rest of test assertions

我还做了一个方法,使这更容易一些:

def get_page(self, url_extention, window=XS):
    return (
        driver.set_window_size(window[0], window[1]),
        driver.get(self.live_server_url + url_extention)
    )

然后在测试中我可以运行

self.get_page('mysite', window=window) # or MD if that is all I want to test

我通常从所有这些开始,然后(类似于引导程序)随着窗口大小的增加而改变我需要的东西。所以对于MD和向上:

# Tests small sizes.
def test_mypage(self):
    self.get_page('mysite', window=window)

    self.assert('Assertions for all sizes')

# Tests larger sizes.
def test_mypage_MD(self):
    self.get_page('mysite', window=[MD,LG,XL])

    self.assert('The things that are different from the previous test')

PS - 我知道我的断点与 Bootstrap 不同。


推荐阅读