Unable to locate using css selector - expected "display:block" but got "[object Object]

[Alessandro Baffa]

Hi,

I went through lots of blogs and I think most of the posts here in the forum, but unfortunately I didn't find the solution to my problem. I also start by saying that I am not an expert of frontend, so this question might sound stupid for most of you, and I apologize in advance. 

My problem is the following:

I have a webpage where there is an element <div class="error hide_error" style="display:block">.This <div> is normally hidden in the page by the CSS rule 'hide_error' which is set to display:none. When the user clicks on a button in the same page, then the style attribute changes from :none to :block.

I would like to test the presence of this style attribute in the page, but I have problems with Nightwatch running with PhantomJS (when I run my tests on Chrome or Firefox they work).

These are the node dependencies I am using for my project:

 "dependencies": {

    "async": "^2.5.0",

    "nightwatch": "^0.9.16",

    "request": "^2.81.0",

    "selenium-standalone": "^6.5.0",

    "phantomjs-prebuilt": "^2.1.14"

  }

This is my nightwatch.js file:

{

  "src_folders" : ["./"],

  "output_folder" : "./reports",

  "custom_commands_path" : "./custom-commands",

  "page_objects_path" : "./page-objects",

  "custom_assertions_path" : "",

  "globals_path" : "",

  "live_output" : false,

  "parallel_process_delay" : 10,

  "disable_colors": false,

  "test_workers" : false,

  "launch_url" : "http://localhost",

  "selenium_host" : "127.0.0.1",

  "selenium_port" : 4444,

  "silent" : true,

  "disable_colors": false,

  "screenshots" : {

    "enabled" : false,

    "path" : ""

  },

  "selenium" : {

    "start_process" : false,

    "server_path" : "node_modules/selenium-standalone/.selenium/selenium-server/4.3.0-server.jar",

    "log_path" : "",

    "host" : "127.0.0.1",

    "port" : 4444,

    "cli_args" : {

      "webdriver.chrome.driver" : "node_modules/chromedriver/bin/chromedriver"

    }

  },

  "test_settings" : {

    "default" : {

      "desiredCapabilities" : {

        "browserName" : "phantomjs",

        "javascriptEnabled" : true,

        "acceptSslCerts" : true,

        "phantomjs.cli.args": ["--ignore-ssl-errors=true", "--web-security=false"],

        "phantomjs.ghostdriver.cli.args" : " --ignore-ssl-errors=true"

      }

    },

    "staging" : {

      "desiredCapabilities" : {

        "browserName" : "phantomjs",

        "javascriptEnabled" : true,

        "acceptSslCerts" : true,

        "phantomjs.binary.path" : "node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs"

      }

    },

}

And this is the test I would like to run:

browser.getAttribute(".planerr", "style", function(result) {

        this.assert.equal(result.value, "display: block;");

 })

The error I get is:

ERROR: Unable to locate element: ".planerr" using: css selector

expected "display: block;" but got: "[object Object]"

I can't figure out if it's a problem of NightwatchJS (maybe I am not doing the correct test), or PhantomJS (in this case, sorry to bother you here).

Thank you very much in advance for any help or suggestion you can give me.

Best regards,

Alessandro

[Timur]

Did you show debug info?
You could use --verbose tag for getting more information about test behavior

[David Linse]

you did not mention an element with class `.planerr` ? so what is this about ? fixing the selector to your initial `.error .hide_error` selector should work ?

regards

[Alessandro Baffa]

@davidlinse I made a mistake in my previous message. The element is <div class="planerr hide_error" style="display:block">

@timur didn't think about -verbose. I am going to take a look and I will post here the result. 

thanks.

[Eric Mumford]

Your page may not be displaying the selector.

And remove the semicolon out of your selector.