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

phantomjs

selenium-webdriver

ghostdriver