How do I make the elemts in HTML have my Id for use by GEB testing?

answered 2015-10-30 03:30:56 +0800

Danny4Impact
1

The best way forward is to surround an element with an xhtml span and give that span an actual id. You can then navigate to the span by id and find the target inside the span. To do this you need to tell the ZUL page to use an xhtml namespace and then tag the span as belonging to that namespace.

First the window tag needs an xmlns attribute targeting the xhtml native namespace:

<window
    id="registrationInboxWindow"
    title="@load(e.windowTitleText)"
    width="100%" height = "100%" border="normal" contentStyle="overflow:auto;"
    style="font-size:24px;background-color:#d9e5ef;"
    apply="org.zkoss.bind.BindComposer"
    viewModel="@id('e') @init('aController')" 
    mode="overlapped" position="center,top"
    xmlns:h="native">

Then you put a native span tag around the target:

<h:span id="trax1">
   <radio id="cosRadioButton" label ="Conditions of Service" 
      radiogroup="travelReasonsRadioGroup" style="color:darkblue"></radio>
</span>

This will produce html that looks like this:

<span id="trax1">
  <span class="z-radio" id="e8tRl0" style="color: darkblue;">
    <input name="_pgdqdtsp" id="e8tRl0-real" type="radio">
    <label class="z-radio-content" id="e8tRl0-cnt" style="color: darkblue;" for="e8tRl0-real">
        Conditions of Service
    </label>
  </span>
</span>

And so GEB can now rapidly find the precise element thus:

conditionsOfServiceRadioButton   { $('#trax1').find('input') }