PhantomJS 未加载 CSS 样式

Question

您好，我在我的 Django 应用程序测试中通过 WebDriver 使用 PhantomJS v 2.1.1。但是从一个有问题的测试的屏幕截图来看，它没有加载 CSS。

我需要测试Bootrap modal中有一些按钮但是根本没有显示。

测试设置中的浏览器初始化：

self.browser = webdriver.PhantomJS(executable_path=settings.PHANTOMJS_PATH)
self.browser.set_window_size(1920, 1080)

并自行测试代码：

self.browser.get(self.live_server_url + "/accounts/login/")
self.browser.find_element_by_name("login").clear()
self.browser.find_element_by_name("login").send_keys(user.email)
self.browser.find_element_by_name("password").clear()
self.browser.find_element_by_name("password").send_keys(password)
self.browser.find_element_by_id("submit").click()
self.browser.find_element_by_id("logout").click()
self.browser.implicitly_wait(10)
self.assertEqual("Ano", self.browser.find_element_by_xpath("/html/body/div[4]/div/div/div[3]/button[2]").text)
self.assertEqual("Ne", self.browser.find_element_by_css_selector("div.modal-footer").text)

最后这里是 HTML 产生预期模态的页面的一部分：

<li>
  <a href="#" id="logout" style="color: #ffffff">                        
    <span class="glyphicon glyphicon-log-out"></span>
  </a>                    
</li>

$(document).ready(function () {

        $("#logout").on("click", function (e) {
            e.preventDefault();
            bootbox.dialog({
                message: '<div class="row">  ' +
                '<div class="col-md-12"> ' +
                '<form class="form-horizontal" id="confirm-logout" method="post" action="/accounts/logout/"> ' +
                "<input type='hidden' name='csrfmiddlewaretoken' value='lmXDBtPw6wSDMClUEIKOxzd8fvc3KCFL' />" +
                '<div class="form-group"> ' +
                '<div class="col-md-8"> ' +
                '<div class="checkbox">' +
                '<label>' +
                '<input type="checkbox" ' +
                'value="no-dialog" name="logout-confirm"> Zobrazovat tento dialog' +
                '</label>' +
                '</div>' +
                '</div> ' +
                '</div> </div>' +
                '</form> </div>  </div>',
                title: "Odhlásit",
                buttons: {
                    danger: {
                        label: "Ne",
                        className: "btn-danger",
                        callback: function () {
                            bootbox.hideAll()
                        }
                    },
                    main: {
                        label: "Ano",
                        className: "btn-primary",
                        callback: function () {
                            $("#confirm-logout").submit();
                        }
                    }
                }
            });
        });
      ....
}

所有CSS和JS文件都是从django dev-server加载的。它们位于静态目录中。这是 HTML 头部的一部分：

<link rel="icon" href="/static/img/favicon.ico">
<link rel="stylesheet" href="/static/css/base_style.css">
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="/static/pizza-master/css/pizza.css">
<link rel="stylesheet" href="/static/css/profile_style.css">
<script src="/static/scripts/jquery_1_11.min.js"></script>
<script src="/static/scripts/bootbox.min.js"></script>
<script src="/static/scripts/jquery.confirm.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/bootstrap/js/npm.js"></script>
<script src="/static/pizza-master/js/vendor/modernizr.js"></script>

最后有截图：

PhantomJs background is transparent

Destktop Chrome run server instead test

Answer 1

好的，所以我找到了解决方案。问题根本与 PhantomJS 无关。 ChromeDriver 行为完全相同。

问题是由 Django 测试引起的，没有像运行服务器那样提供静态文件。

对我有用的解决方案是运行：

python manage.py collectstatic

如果您的 Django 设置了静态文件，这将确保测试服务器提供静态文件。 Django static files doc

PhantomJS 未加载 CSS 样式

PhantomJS not loading CSS styles

python

selenium-webdriver

phantomjs

ghostdriver