lundi 11 avril 2016

PhantoJS not loading CSS styles

Hi I'm ussing PahntomJS as Selenium browser via GhostDriver in my Django app tests. But from screenshot i made i 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();
                        }
                    }
                }
            });
        });
      ....
}

Lastly there are screenshots:

PhantomJs backgroud is transparent

Destktop Chrome run server instead test

Aucun commentaire:

Enregistrer un commentaire