如何在本地或 Jenkins 上*自动化*基于浏览器的单元测试答案

【问题标题】：How to *automate* browser based unit tests, locally or on Jenkins如何在本地或 Jenkins 上*自动化*基于浏览器的单元测试
【发布时间】：2017-04-12 22:45:55
【问题描述】：

几个月来一直在寻找这个问题的答案，但仍然不知道如何实际去做 - 如何自动化在浏览器中运行的测试？ Selenium 测试在后端运行，当然可以自动化，我们现在正在这样做。最近我的任务是自动化基于浏览器的单元测试，但我的知识差距很大 -

我不知道该怎么做-

例如 - 自动化测试运行程序如何收集在浏览器中运行的（单元）测试的测试结果和退出代码？谁能解释一下这实际上是如何完成的以及完成此操作的步骤？

Karma 是实现这一目标的最佳工具吗？

【问题讨论】：

您能解释一下“单元测试”的确切含义吗？您的意思是测试网页上的元素是否按预期工作或...？
我的意思是在浏览器运行时运行单元测试——例如在浏览器的脚本标签内运行的代码。
那么，您想对 JavaScript 代码进行单元测试，并在浏览器中执行单元测试，对吗？使用业力：karma-runner.github.io/1.0/index.html
@JBNizet 对，Karma 测试可以自动化，还是开发人员手动运行它们并目视检查结果？
好的，看来 Karma 可以在 CI 服务器上进行自动化测试，所以很好，我想知道它是如何工作的

标签： unit-testing selenium jenkins automated-tests browser-testing

【解决方案1】：

您可以使用http://phantomjs.org/。 phantomjs 是一个无头网络浏览器，您可以将其视为没有 gui 的全栈网络浏览器，可用作库。与 karma 一起，您可以在不依赖任何 GUI 实现的情况下执行单元测试。
这里有一篇博文，解释了这种场景中的不同组件http://orizens.com/wp/topics/my-setup-for-testing-js-with-jasmine-karma-phantomjs-angularjs/

意味着您可以在无头 linux 服务器上执行 karma 单元测试。

澄清：

对 phantomjs 的需求并非来自单元测试。对 phantomjs 的需求源于您的 js 单元测试依赖于浏览器 api。
结构化代码是一个很好的设计原则，与浏览器 api 的耦合不会在所有代码上杂乱无章。尝试引入一个封装浏览器 api 依赖项的薄层。像这样，您可以在不需要 phantomjs 的情况下测试您的 js。
使用 phantomjs 执行单元测试可能需要一些时间。如果你有很多单元测试，最好将浏览器 api 的依赖关系分解出来。因此，您可以在不需要 phantomjs 的情况下执行更多测试，并且只有少数单元测试需要使用 phantomjs 执行。

【讨论】：

我为我们在 Amazone AWS (ubantu) 上安装了 Jenkins 的客户端之一设置了这个 phantomJS，并且测试用例也在同一台机器上运行。

【解决方案2】：

你也许可以用黄瓜。如果您有 20 个测试用例，则可能需要执行。

您可以创建一个包含所有场景的功能文件。需要做什么的 Runner 类和方法可以在不同的包中定义。假设你有一个场景 1. 打开浏览器。 2.输入谷歌链接。 3. 使用凭据登录。

使用上述信息创建一个功能文件。

使用 Cucumber runner 类。并创建包方法如

@When("^Open Browser$")
    public void open_Browser() throws Throwable {
    WebDriver driver = new FirefoxDriver();
    driver.get("www.google.com");
}

类似地，您可以创建不同的方法来运行。要运行 jar，您可以使用命令行界面技术。

【讨论】：

【解决方案3】：

一篇很棒的文章LINK 基本：这是针对 Python 自动化的，您需要具备一些先前的知识/经验。

pip install selenium
pip install nose

以上应该在cmd或者shell中执行...

对于本次测试，我们将打开 AWeber 网站http://www.aweber.com 使用 Firefox，并确保页面标题为“AWeber 小型企业电子邮件营销服务和软件解决方案”。

import unittest
from selenium import webdriver

class AweberTest(unittest.TestCase):

    @classmethod
    def setUpClass(cls):
        cls.driver = webdriver.Firefox()

    def test_title(self):
        self.driver.get('https://www.aweber.com')
        self.assertEqual(
            self.driver.title,
            'AWeber Email Marketing Services & Software Solutions for Small Business')

    @classmethod
    def tearDownClass(cls):
        cls.driver.quit()

使用鼻子运行测试：

nose aweber.py

下一个测试，点击元素：

self.driver.get('https://www.aweber.com')
order_tab = self.driver.find_element_by_css_selector('#ordertab>a')
order_tab.click()

我们可以使用很多选择器 find_element_by_(css/xpath/name/id) - Locating elements 在这种情况下，我们使用了 click 方法，但我们也可以 .send_keys("asdf") ，滚动，执行 java 脚本使用

browser.execute_script("alert('I canNNNNN not do javascript')")

完整代码示例：LINK-Pastebin

【讨论】：