How to verify the selected option from the dropdown using Behat/Mink

Question

There are couple of filters on the page and I would like to verify the default filter values. I'm not able to get the selectors working. Can someone help.

Here is the code snippet:

<div class="filter-widget">
<form name="" method="post" action="">
<div class="pure-g-r">
    <div class="pure-u-1-4">
    <div><label for="day" class="required">Day</label><select id="day" name="day">    <option value="all">all</option><option value="Sunday">Sunday</option><option value="Monday">Monday</option><option value="Tuesday">Tuesday</option><option value="Wednesday">Wednesday</option><option value="Thursday" selected="selected">Thursday</option><option value="Friday">Friday</option><option value="Saturday">Saturday</option></select></div>
</div>
<div class="pure-u-1-4">
    <div><label for="month" class="required">Month</label><select id="month" name="month"><option value="January">January</option><option value="February">February</option><option value="March">March</option><option value="April" selected="selected">April</option><option value="May">May</option><option value="June">June</option><option value="July">July</option><option value="August">August</option><option value="September">September</option><option value="October">October</option><option value="November">November</option><option value="December">December</option></select></div>
</div>
</div>

As you can see above, the filters default to the current day/month and I need to be able to verify those values. But the css selector used below is failing. Is it supported in Behat?

$page = $this->getSession()->getPage();
$defaultFilterDay = $page->find('css', '#day select option:selected')->getText();
$defaultFilterMonth = $page->find('css', '#month select option:selected')->getText();
$currentDay = new \DateTime('now')->format('l'); //This returns current Day
$currentMonth = new \DateTime('now')->format('F'); //This returns current Month

assertEquals(currentDay, $defaultFilterDay);
assertEquals(currentMonth, $defaultFilterMonth);

Thereinafter

This was pretty easy using jQuery. But I'm finding it difficult with the CSS selectors. – Thereinafter

Answer 1

The following selector worked for me:

$defaultFilterDay = $page->find("css", "#day option[selected='selected']")->getText();
    $defaultFilterMonth = $page->find("css", "#month option[selected='selected']")->getText();

    date_default_timezone_set('UTC');
    $currentTime = new \DateTime('now');
    $currentDay = $currentTime->format('l');
    $currentMonth = $currentTime->format('F');

    assertEquals($currentDay, $defaultFilterDay);
    assertEquals($currentMonth, $defaultFilterMonth);    

Thereinafter

Answer 2

I had the same problem, I wanted to determine the value of the selected option using the option value and the select css selector. This is what I ended up doing:

/**
 * @Then /^the option "([^"]*)" from select "([^"]*)" is selected$/
 */
public function theOptionFromSelectIsSelected($optionValue, $select)
{
    $selectField = $this->getSession()->getPage()->find('css', $select);
    if (NULL === $selectField) {
        throw new \Exception(sprintf('The select "%s" was not found in the page %s', $select, $this->getSession()->getCurrentUrl()));
    }

    $optionField = $selectField->find('xpath', "//option[@selected='selected']");
    if (NULL === $optionField) {
        throw new \Exception(sprintf('No option is selected in the %s select in the page %s', $select, $this->getSession()->getCurrentUrl()));
    }

    if ($optionField->getValue() !== $optionValue) {
        throw new \Exception(sprintf('The option "%s" was not selected in the page %s, %s was selected', $optionValue, $this->getSession()->getCurrentUrl(), $optionField->getValue()));
    }
}

Cerium

Sometimes the selected option does not have the attribute with value: selected="selected" if you don't want or can't change this in the application under test you can adjust the step-definition-implementation like this: $optionField = $selectField->find('xpath', "//option[@selected]"); – Subclavian

Answer 3

If you don't want to add custom steps to your feature context, you could try using the CSS selectors directly in Gherkin:

Then the "select[name='day'] option[selected='selected']" element should contain "Thursday"

And the "select[name='month'] option[selected='selected']" element should contain "April"

Repercussion

I didn't want to add custom steps but couldn't make this version work until I changed it slightly: Then the "select[name='day'] option[selected='selected']" element should contain "Thursday" – Cherubini

Answer 4

I've made a Context with this step definition:

/**
 * Checks, that option from select with specified id|name|label|value is selected.
 *
 * @Then /^the "(?P<option>(?:[^"]|\\")*)" option from "(?P<select>(?:[^"]|\\")*)" (?:is|should be) selected/
 * @Then /^the option "(?P<option>(?:[^"]|\\")*)" from "(?P<select>(?:[^"]|\\")*)" (?:is|should be) selected$/
 * @Then /^"(?P<option>(?:[^"]|\\")*)" from "(?P<select>(?:[^"]|\\")*)" (?:is|should be) selected$/
 */
public function theOptionFromShouldBeSelected($option, $select)
{
    $selectField = $this->getSession()->getPage()->findField($select);
    if (null === $selectField) {
        throw new ElementNotFoundException($this->getSession(), 'select field', 'id|name|label|value', $select);
    }

    $optionField = $selectField->find('named', array(
        'option',
        $option,
    ));

    if (null === $optionField) {
        throw new ElementNotFoundException($this->getSession(), 'select option field', 'id|name|label|value', $option);
    }

    if (!$optionField->isSelected()) {
        throw new ExpectationException('Select option field with value|text "'.$option.'" is not selected in the select "'.$select.'"', $this->getSession()); 
    }
}

So you can add the following step in your Behat features:

Then the "Option 1" option from "Select options" should be selected

You can see the full Context code in here: https://github.com/Aplyca/BehatContexts/blob/master/src/Aplyca/BehatContext/FormContext.php#L64

Cowardice

Actually, it shoud be $optionField = $selectField->find('named', array( 'option', "\"{$option}\"", )); Without this, it wont work for options with spaces in – Ponytail

Answer 5

If you want to assert select values like this:

And "4" from "Number of Columns" is selected
And "red" from "Background Color" is selected
And "plaid" from "Background Image" is selected

Then use this modified/improved version by @Dallas' answer

  /**
   * @Then /^"([^"]*)" from "([^"]*)" is selected$/
   *
   * To assert a select value.
   * Shamelessly inspired by: https://mcmap.net/q/1403776/-how-to-verify-the-selected-option-from-the-dropdown-using-behat-mink
   */
  public function theOptionFromSelectIsSelected($optionValue, $select) {
    $selectField = $this->getSession()->getPage()->findField($select);

    if (NULL === $selectField) {
      throw new \Exception(sprintf('The select "%s" was not found in the page %s', $select, $this->getSession()->getCurrentUrl()));
    }

    $optionField = $selectField->find('xpath', "//option[@selected]");
    if (NULL === $optionField) {
      throw new \Exception(sprintf('No option is selected in the %s select in the page %s', $select, $this->getSession()->getCurrentUrl()));
  }

  if ($optionField->getValue() != $optionValue) {
    throw new \Exception(sprintf('The option "%s" was not selected in the page %s, %s was selected', $optionValue, $this->getSession()->getCurrentUrl(), $optionField->getValue()));
  }
}

Bate

Answer 6

I use the following code for getting value of selected option

$elementByName = $this->getSession ()->getPage ()->find ( 'css', "#" . $name );

if (! $elementByName) {
    throw new FailureException ( 'select with name ' . $name . ' is not found' );
} else {
    $v = $elementByName->getValue ();
}

Schaaff

Thanks for your reply, but I found the solution posted below – Thereinafter