Nightwatch.js can't recognize XPath/CSS selector while executing .setValue()

Question

I am trying to run a Nightwatch.js script which would let me search for something through Google Advanced search. Here's my script:

'Google advanced search'(browser){
    const value = 'apple';
    const searchBar = 'name="as_q';
    
    
    browser
        .url('https://www.google.com/advanced_search')
        .setValue(searchBar, value) 
        .saveScreenshot('tests_output/google.png')
}

I have a problem with .setValue() when trying to run the script and I always get the following error:

NoSuchElementError: An error occurred while running .click() command on <class="jfk-button jfk-button-action dUBGpe">: (Session info: chrome=85.0.4183.121), (Driver info: chromedriver=85.0.4183.87 (cd6713ebf92fa1cacc0f1a598df280093af0c5d7-refs/branch-heads/4183@{#1689}),platform=Windows NT 10.0.19041 x86_64); invalid selector: An invalid or illegal selector was specified {"status":-1,"state":"","code":"","value":{"message":"invalid selector: An invalid or illegal selector was specified","error":[" (Session info: chrome=85.0.4183.121)"," (Driver info: chromedriver=85.0.4183.87 (cd6713ebf92fa1cacc0f1a598df280093af0c5d7-refs/branch-heads/4183@{#1689}),platform=Windows NT 10.0.19041 x86_64)"]},"errorStatus":32,"error":"The supplied argument was an invalid selector (e.g. XPath/CSS). – invalid selector: An invalid or illegal selector was s...","httpStatusCode":200} at processTicksAndRejections (internal/process/task_queues.js:97:5)

Basically it tells me the selector I use (XPath/CSS) is invalid for some reason. The selector comes from the following element in the page:

<input class="jfk-textinput" value="" autofocus="autofocus" id="xX4UFf" name="as_q" type="text">

Is there a way I can resolve this? Thank you in advance.

Answer 1

You selector for search bar is wrong use '.jfk-textinput' or '#xX4UFf'

 'Google advanced search'(browser){
        const value = 'apple';
        const searchBar = '.jfk-textinput';
        
        
        browser
            .url('https://www.google.com/advanced_search')
            .setValue(searchBar, value) 
            .saveScreenshot('tests_output/google.png')