python - 使用 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)
这样做的好处是可以非常清楚地显示给定测试失败的地方(即桌面或移动)。问题是我希望对两个(可能还有多个)视口大小运行完全相同的测试,并且我不想在多个类中维护完全相同的测试。
我对参数化测试的大部分搜索都会产生针对不同数据集运行相同测试的解决方案,但我还没有找到针对多个启动配置设置和运行相同测试的解决方案示例。
我很犹豫(虽然不是不愿意)切换到不同的测试框架或安装额外的包只是为了解决这个特定的情况。
有没有人找到解决这个问题的直接方法?
解决方案
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 不同。
推荐阅读
- python - 读取 csv 时阻止 pandas 对数据进行分组
- php - 如何根据单击的链接创建一个加载动态/不同内容的 PHP 页面?
- r - purrr - pmap - 以整洁的风格为函数参数名称提供不同的列名
- javascript - 标签组件不会使用 BackSpace 删除 - React Native
- styles - stylegan 编码器打印图像太小
- c# - 使用窗口标题或进程名称
- python - 允许在 Sphinx 文档字符串的简短摘要中使用句号
- linux - 如何将两个 CSV 文件与 Linux 列合并?
- javascript - 使用 JavaScript 将元素中的某些文本转换为元素本身
- elasticsearch - 如何使用 Kibana 脚本字段在嵌套字段中获取值?