尝试从选择元素中选择任何非禁用选项

huangapple go评论61阅读模式
英文:

Trying to choose any non-disabled option from a select element

问题

以下是您要的翻译部分:

"我有一个包含多个子记录的父记录,所有这些记录都在ViewParentWithChildren和EditParentWithChildren屏幕上一起显示。我想编写一个Cypress测试,向现有的父记录添加新的子记录。每个子记录当然都在一个<tr>中。

问题是,<select>元素中有许多<option disabled>无效选项。我需要选择一个有效且已启用的选项,但事先不知道该选项的名称/值是什么。我不关心它们是什么,我只需要选择任何非禁用的选项。

我尝试了一个标准的方法:

cy.contains('button', /Add Another Child Record/i).click();
cy.get('[name=child_id_name][value=""]')  // 新添加的子记录在必填字段中没有内容
      .parents('tr')
      .within(tr => {
        cy.get('input[name=child_id_name]').type(randomAlpha());
        cy.get('input[name=description]').type(randomAlpha());
        cy.get('select[name=type]').select(?????);  // 待办事项
      });

Cypress只允许通过名称、值或索引选择<option>。尝试直接选择有效的<option>是不起作用的,这是设计上的限制。"

英文:

I have a parent record with multiple child records, all shown together on the ViewParentWithChildren and EditParentWithChildren screens. I want to write a cypress test that adds a new child record to an existing parent record. Each child record is in a &lt;tr&gt; of course.

The problem is, the &lt;select&gt; element has many &lt;option disabled&gt; invalid options in it. I need to select a valid, enabled one, and I don't know ahead of time what the names/values in that option are going to be. I don't care what they are, I just need to select any non-disabled option.

I try a standard-ish:

cy.contains(&#39;button&#39;, /Add Another Child Record/i).click();
cy.get(&#39;[name=child_id_name][value=&quot;&quot;]&#39;)  // newly added has nothing in the required field
      .parents(&#39;tr&#39;)
      .within(tr =&gt; {
        cy.get(&#39;input[name=child_id_name]&#39;).type(randomAlpha());
        cy.get(&#39;input[name=description]&#39;).type(randomAlpha());
        cy.get(&#39;select[name=type]&#39;).select(?????);  // TODO
      });

Cypress only allows selecting an &lt;option&gt; via name, value, or index. Attempting to .select a valid &lt;option&gt; directly doesn't work, by design.

答案1

得分: 1

以下是翻译好的部分:

示例页面用于POC

&lt;select&gt;
  &lt;option value=&quot;1&quot; disabled&gt;three&lt;/option&gt;
  &lt;option value=&quot;2&quot;&gt;two&lt;/option&gt;
  &lt;option value=&quot;3&quot; disabled&gt;three&lt;/option&gt;
  &lt;option value=&quot;4&quot;&gt;four&lt;/option&gt;
&lt;/select&gt;

方法1:首先暴露&lt;select&gt;

cy.get(&#39;select&#39;)
  .should(&#39;have.value&#39;, &#39;2&#39;)  // 默认情况下,选择的值是第一个已启用的
  .then($select =&gt; {
    cy.wrap($select)
      .find(&#39;option:enabled:last&#39;)
      .then($lastEnabledOption =&gt; {
        cy.wrap($select).select($lastEnabledOption.val())
      })
  })
  .should(&#39;have.value&#39;, &#39;4&#39;)  // 检查新值

方法2:使用jQuery设置选定属性

cy.get(&#39;select&#39;)
  .should(&#39;have.value&#39;, &#39;2&#39;)          // 初始值
  .find(&#39;option:enabled:last&#39;)
  .invoke(&#39;attr&#39;, &#39;selected&#39;, true)

cy.get(&#39;select&#39;)
  .should(&#39;have.value&#39;, &#39;4&#39;)          // 新值
英文:

Here's a couple of other ways you may or may not find easier

Example page for POC

&lt;select&gt;
  &lt;option value=&quot;1&quot; disabled&gt;three&lt;/option&gt;
  &lt;option value=&quot;2&quot;&gt;two&lt;/option&gt;
  &lt;option value=&quot;3&quot; disabled&gt;three&lt;/option&gt;
  &lt;option value=&quot;4&quot;&gt;four&lt;/option&gt;
&lt;/select&gt;

Method 1: Expose the &lt;select&gt; first

cy.get(&#39;select&#39;)
  .should(&#39;have.value&#39;, &#39;2&#39;)  // by default the selected value is the first enabled
  .then($select =&gt; {
    cy.wrap($select)
      .find(&#39;option:enabled:last&#39;)
      .then($lastEnabledOption =&gt; {
        cy.wrap($select).select($lastEnabledOption.val())
      })
  })
  .should(&#39;have.value&#39;, &#39;4&#39;)  // check new value

Method 2: Set the selected attribute with jQuery

cy.get(&#39;select&#39;)
  .should(&#39;have.value&#39;, &#39;2&#39;)          // initial value
  .find(&#39;option:enabled:last&#39;)
  .invoke(&#39;attr&#39;, &#39;selected&#39;, true)

cy.get(&#39;select&#39;)
  .should(&#39;have.value&#39;, &#39;4&#39;)          // new value

答案2

得分: 0

这个解决方案有点反其道而行。首先从选择中获取所有非禁用选项,然后进入其中之一,然后再返回到选择,将.text()提供给.select

cy.contains('button', /Add Another Child Record/i).click();
cy.get('[name=child_id_name][value=""]')  // 新添加的字段在必填字段中没有内容
      .parents('tr')
      .within(tr => {
        cy.get('input[name=child_id_name]').type(randomAlpha());
        cy.get('input[name=description]').type(randomAlpha());
        cy.get('select[name=type] option:not([disabled])') // 获取所有非禁用选项
          .last() // 第一个选项通常为空,用于取消选择,所以选择最后一个
          .within(option => {
            cy.root().closest('select').select(option.text());
          });
      });
英文:

The solution was kind of inside-out. Get all non-disabled options from that select first, then go within one of them, and "escape hatch" back out again to the select, feeding the .text() to the .select

cy.contains(&#39;button&#39;, /Add Another Child Record/i).click();
cy.get(&#39;[name=child_id_name][value=&quot;&quot;]&#39;)  // newly added has nothing in the required field
      .parents(&#39;tr&#39;)
      .within(tr =&gt; {
        cy.get(&#39;input[name=child_id_name]&#39;).type(randomAlpha());
        cy.get(&#39;input[name=description]&#39;).type(randomAlpha());
        cy.get(&#39;select[name=type] option:not([disabled])&#39;) // get all its non-disabled options
          .last() // the first option is usually blank for un-selecting, so, .last
          .within(option =&gt; {
            cy.root().closest(&#39;select&#39;).select(option.text());
          });
      });

huangapple
  • 本文由 发表于 2023年2月9日 02:52:00
  • 转载请务必保留本文链接:https://go.coder-hub.com/75390451.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定