web-dev-qa-db-fra.com

Nightwatch pour sélectionner une option dans la zone de sélection

J'essaie d'utiliser nightwatch.js pour sélectionner une option dans une zone de sélection.

J'ai le code:

    this.browser.click('select[name="month"]')
        .pause(1000)
        .click('option[value="3"]')
        .click('select[name="day"]')
        .pause(1000)
        .click('option[value="6"]')
        .click('select[name="year"]')
        .pause(1000)
        .click('option[value="1989"]');

Il sélectionne le bon mois, l'année sur la page mais pas le jour. Voici le code HTML pour la zone de sélection du jour:

<select aria-label="Day" id="day" name="day" data-validatorGroup="bday" data-component="selectbox">
    <option selected="selected" value="" aria-label="Date of birth">
        Day</option>
    <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
            <option value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>
            <option value="24">24</option>
            <option value="25">25</option>
            <option value="26">26</option>
            <option value="27">27</option>
            <option value="28">28</option>
            <option value="29">29</option>
            <option value="30">30</option>
            <option value="31">31</option>
         </select>

Est-ce que quelqu'un sait pourquoi il ne sélectionne pas le bon jour?

javascriptjquerynightwatch.js
12
Brown A

Selon ce post , cela fonctionne:

.click('#myselectbox option[value=somevalue]')
24
Cees Timmerman

La syntaxe suivante semble être plus fiable:

.click('select[id="myselectbox"] option[value="somevalue"]')
11
79E09796

Vous pouvez essayer ce qui suit, cela fonctionne pour moi.

<option value="2">2</option>
...
.setValue('select[id="day"]','2')

si vous avez une valeur différente de celle du texte de votre option 

par exemple. <option value="123">abc</option>

Vous faites .setValue ('select[id="yourselectid"]','abc')

7
Raymond

Si vous voulez faire avec Page Object, vous devez utiliser le rappel.

sectionInfo.click("@selectOwner",()=>{
  sectionInfo.click("option[value='owner']");
});
5
IceManSpy
.click("#selectid option:nth-child(1)")

Cela fonctionne aussi en utilisant l'identifiant de classe -

par exemple.

.click(".selectclass option:nth-child(1)")

Si vous définissez le nième enfant sur 1, le premier élément de la liste déroulante sera choisi.

Le réglage sur 2 sélectionnera la deuxième valeur, etc., etc.

J'espère que cela aide pour ceux d'entre vous qui n'ont pas eu de chance avec les solutions énoncées précédemment.

3
Dylan

Pour améliorer un peu la réponse de @IceManSpy: vous n'avez pas besoin d'utiliser un rappel pour les objets de page, cela fonctionne aussi:

pageObject
  .click('@selectOwner')
  .click('option[value="owner"]')

Ou si vous souhaitez sélectionner par position plutôt que par valeur:

pageObject
  .click('@selectOwner')
  .click('option:nth-child(3)')

Notez que c'est :nth-child(3) et non pas :nth-child(3n), puisque le premier signifie "la troisième option" et le dernier signifie "toutes les trois options". Pour plus de détails, voir la documentation de nth-child sur MDN

(testé avec Nightwatch 0.9.21)

0
JCE