Search code examples
jquerygeb

Verify selected option in a drop-down using Geb

Is there a better solution for verifying the text of the selected option using Geb? I have 2 dropdowns

Date Format

<select name="dateFormat" class="select2-single-drop-down form-control" style="width:100%" id="dateFormat">
<option value="MM/DD/YYYY">MM/DD/YYYY</option>
<option value="DD/MM/YYYY">DD/MM/YYYY</option>
</select>

Time Zone

<select id="timeZonePreference" name="timeZonePreference" class="form-control">
<option value="America/Chicago">- Select time zone -</option>
<option value="Etc/GMT+12">GMT -12:00, Dateline Time  Marshall Islands </option>
<option value="US/Samoa">GMT -11:00, Samoa Time  Samoa </option>
<option value="US/Hawaii">GMT -10:00, Hawaii Time  Honolulu </option>
<option value="US/Alaska">GMT -09:00, Alaska Time (Anchorage)</option>
<option value="US/Pacific">GMT -08:00, Pacific Time (San Francisco)</option>
<option value="US/Arizona">GMT -07:00, Mountain Time (Arizona)</option>
<option value="America/Denver">GMT -07:00, Mountain Time (Denver)</option>
<option value="America/Chicago">GMT -06:00, Central Time (Chicago)</option>
<option value="America/Mexico_City">GMT -06:00, Mexico Time (Mexico City)</option>
</select>

I have created a page object for each dropdown

modalDateDropdown {$("#dateFormat")}
modalTZoneDropdown {$("#timeZonePreference")}

I have the following method for verifying the text of the selected value

static void verifyDDSelection (def selector, String expected){
    String b = selector.find('option', value:selector.getAt(0).value())*.text()
    assert b == expected
}

When I verify the selected text of Date Format, the method returns [MM/DD/YYYY]

Time Zone returns [- Select time zone -, GMT -06:00, Central Time (Chicago)]

Technically it is working correctly, but I don't like that the brackets are returned as part of the string. Does geb have something similar to seleniums select class?

Solution

  • In Geb you can use a more strongly typed approach for form elements, so-called form control modules. It makes working with form elements much easier and gets you rid of additional static helper methods. I have reproduced your situation like this:

    HTML sample code:

    <html>
  <body>
    <form>
      Date Format
      <select name="dateFormat" id="dateFormat">
        <option value="MM/DD/YYYY">MM/DD/YYYY</option>
        <option value="DD/MM/YYYY">DD/MM/YYYY</option>
      </select>
      <p/>
      Time Zone
      <select id="timeZonePreference" name="timeZonePreference">
        <option value="America/Chicago">- Select time zone -</option>
        <option value="Etc/GMT+12">GMT -12:00, Dateline Time Marshall Islands</option>
        <option value="US/Samoa">GMT -11:00, Samoa Time Samoa</option>
        <option value="US/Hawaii">GMT -10:00, Hawaii Time Honolulu</option>
        <option value="US/Alaska">GMT -09:00, Alaska Time (Anchorage)</option>
        <option value="US/Pacific">GMT -08:00, Pacific Time (San Francisco)</option>
        <option value="US/Arizona">GMT -07:00, Mountain Time (Arizona)</option>
        <option value="America/Denver">GMT -07:00, Mountain Time (Denver)</option>
        <option value="America/Chicago">GMT -06:00, Central Time (Chicago)</option>
        <option value="America/Mexico_City">GMT -06:00, Mexico Time (Mexico City)</option>
      </select>
    </form>
  </body>
</html>

    Geb page object:

    package de.scrum_master.stackoverflow

import geb.Page
import geb.module.Select

class DateFormatTimeZonePage extends Page {
  static url = "file:///C:/Users/.../GebSpockSamples/src/test/resources/dateformat-timezone.htm"

  static content = {
    modalDateDropdown { $("#dateFormat").module(Select) }
    modalTZoneDropdown { $("#timeZonePreference").module(Select) }
  }
}

    Geb test:

    package de.scrum_master.stackoverflow

import geb.spock.GebReportingSpec

class DateFormatTimeZoneIT extends GebReportingSpec {
  def "Check texts for selected drop-down elements"() {
    given:
    def page = to DateFormatTimeZonePage

    when: "selecting drop-down elements by unique value"
    page.modalDateDropdown = "DD/MM/YYYY"
    page.modalTZoneDropdown = "US/Samoa"

    then: "corresponding texts match"
    page.modalDateDropdown.selectedText == "DD/MM/YYYY"
    page.modalTZoneDropdown.selectedText == "GMT -11:00, Samoa Time Samoa"

    when: "selecting drop-down default element with non-unique value by text"
    page.modalTZoneDropdown = "- Select time zone -"

    then: "corresponding value matches"
    page.modalTZoneDropdown.selected == "America/Chicago"

    when: "selecting another drop-down element with non-unique value by text"
    page.modalTZoneDropdown = "GMT -06:00, Central Time (Chicago)"

    then: "corresponding value matches"
    page.modalTZoneDropdown.selected == "America/Chicago"
  }
}