pythonselenium-webdriverphantomjsghostdriver

PhantomJS not loading CSS styles


Hi I'm using PhantomJS v 2.1.1 via WebDriver in my Django app tests. But from screenshot in one problematic test it isn't loading CSS.

I need to test that there are some buttons in Bootrap modal but it's not displayed at all.

Browser init in test setup:

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

And test code it self:

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)

Lastly here is part of HTML page that produce expected modal:

<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();
                        }
                    }
                }
            });
        });
      ....
}

All CSS and JS files are loaded from django dev-server. They are located in static dir. Here's part of HTML head:

<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>

Lastly there are screenshots:

PhantomJs background is transparent

Destktop Chrome run server instead test


Solution

  • OK, so I'm found solution. Problem wasn't related to PhantomJS at all. ChromeDriver acting exactly same.

    Problem was caused by Django tests with not serving static files same way as runserver did.

    Solution with worked for me is run:

    python manage.py collectstatic
    

    This ensure that test server serve static files if your django have setup static files. Django static files doc