您如何编写基于Polymer(JS)的应用程序(大约2015年5月)的端到端测试？

Question

我已经构建了一个基于Polymer的应用程序 我想为它编写一些端到端测试(不是单元测试,而是用户行为集成测试).我目前如何做到这一点(2015年5月)？

Answer 1

这几天我一直在研究这个问题。尽管网络上有大量专门讨论一个或另一个相关主题的页面，但没有任何文档记录这一问题的解决方案。我能够拼凑出一些有用的东西。所以就是这样。希望这对那些希望为 Polymer 应用程序编写端到端测试的人有用。我相信随着 Polymer、Web 组件和 Shadow DOM 技术的成熟，将会出现更好的解决方案。

一些细节：Linux，希望在脚本中自动测试（最好是无头），应用程序由许多 Polymer 元素组成，由 Django 服务器提供服务并从 Django 服务器加载数据。

尝试使用 PhantomJS 失败

首先，我尝试使用 casperjs 和 phantomjs。phantomjs 是无头的，casperjs 具有非常好的导航支持，所以我认为这将是一个很好的组合。不幸的是，phantomjs 不支持 HTML5 导入，并且 webcomponents.js polyfill 似乎不适用于 phantomjs。

使用硒

我最终得到了一个基于 Selenium/ChromeDriver 的解决方案，使用 selenium python 客户端。我没有使用 Firefox 驱动程序对此进行测试，所以我不知道这是否有效。这是您需要做的：

为了让事情变得更容易，创建一个目录来放置东西：

mkdir selenium

安装谷歌浏览器。我通过 Google 网站下载了 Linux 版本。然后，下载selenium server 2.45和chromedriver 2.15，放入selenium目录中。例如

$ ls selenium/
chromedriver  selenium-server-standalone-2.45.0.jar

然后，安装Python Selenium API

$ pip install selenium

运行一个简单的测试：

$ cd selenium
$ cat > test.py
from selenium import webdriver
driver = webdriver.Chrome('./chromedriver')
driver.get("http://localhost:8000/myapp/")
driver.implicitly_wait(3)
print driver.title
content = driver.find_element_by_css_selector('myelement::shadow h3')
print content.text
driver.close()
$ xvfb-run python test.py

（xvfb是使test.py无头运行所必需的）

test.py 打印出名为 myelement 的自定义 Polymer 元素中 h3 元素的内容。例如，如果 DOM 看起来像

<myelement>
  <h3>Hello World</h3>
</myelement>

然后 test.py 打印“Hello World”。

h3 元素出现在 myelement 的影子 DOM 中。Chrome 开发工具将此 h3 的 CSS 选择器列为“myelement #shadow-root h3”。使用 Selenium，您可以使用“myelement::shadow h3”作为 CSS 选择器来访问此 h3。

测试和测试数据

我将测试组织为 Python 单元测试测试用例，并编写了测试驱动程序脚本。驱动程序脚本分叉，在子进程中创建 Django 开发服务器，并在父进程中运行“python -m unittest”。每个测试用例都使用 Python selenium API 连接到 Django 开发服务器。在每个测试用例的setUp 和tearDown 方法中，我使用Django 模型类将测试数据注入到数据库中。

我在 xvfb 下运行驱动程序脚本——“xvfb-run python driver.py”——使其无头。

处理 Ajax 和双向绑定

我的 Polymer 应用程序使用 ajax 加载数据和双向绑定来呈现 HTML 模板。Polymer 还异步渲染模板并更新 DOM。在我的测试用例中，我依靠 Selenium 的条件等待来检测数据加载何时完成以及 DOM 重新渲染。由于某种原因，隐式等待（无论如何这不是一个好主意）对我不起作用；隐式等待立即返回。我还更新了 HTML 模板，使其更易于测试——添加 DOM ID 和唯一的文本或 CSS 选择器来区分应用程序的不同阶段。

注意事项

使用 Selenium，仅具有内部 HTML 的按钮变得不可点击。如果您有这样的按钮，请使用 ActionChains 来单击它：

chain = ActionChains()
chain.move_to_element(element)
chain.click()
chain.perform()