How to check the value of the “value” attribute in an <input> element?

Question

I have the following:

<h1>Request Group Rate</h1> 
    <form>
        <input type="hidden" name="referrer" id="bmn">
            Name: 
        <input type="text" id="fieldName" name="name"><br> Group size: 
        <input type="text" name="groupSize"><br> 
        Email: <input type="email" name="email"><br>
        <input type="submit" value="Submit">
    </form>
    <script>
        $(document).ready(function(){
            $('input[name="referrer"]').val(document.referrer);
            $(document.body).append('<div id="ready"></div>');
        });
    </script>

After navigating to the page using selenium:

    driver.findElement(By.id('requestGroupRate')).click();
    driver.sleep(100);
    driver.wait(function(){
        return driver.findElement(By.id('ready')).then(function(){
                            driver.sleep(1000);

           var element =  driver.findElement(By.id('bmn'));
            console.log(element.value);
            assert(element.value === referrer);
            done();
        });
    },5000);

My assertion fails. For some reason element.value is undefined. Why is that ? How should I compare the value that is set in the input field with id "bmn" then ? Clearly the value should be set, because the div with id "ready" is created only after the value is set, so if the driver can find "ready", then the value for the input field should be set..

What am I doing wrong ?

Answer 1

var ele =  driver.findElement(By.id('bmn'));
ele.getAttribute('value').then(function(text){
  console.log('bmn value: ' + text);
  assert(text === 'change to your expected value');
});

Answer 2

To get the value of an attribute, we can use .getAttribute('Attribute Name').

    driver.findElement(By.id('bmn')).getAttribute('value').then(function(attributeValue){
      console.log('bmn value: ' + attributeValue);
      assert(attributeValue=== 'expected value'); });