使用selenium web-driver从Dropdown中选择值

时间:2018-01-17 04:27:00

标签: selenium selenium-webdriver selenium-ide

我对使用硒选择下拉值中的一个值有一点疑问。当我使用selenium-IDE生成代码时,它给了我一组代码,用于从下拉列表中进行选择。 代码如下 - >

driver.findElement(By.cssSelector("input.search")).click();
driver.findElement(By.xpath("//table[@id='project-add-table']/tbody/tr[4]/td[3]/div/div[2]/div[3]")).click();
new Select(driver.findElement(By.cssSelector("select"))).selectByVisibleText("Test");

那么有人能说出第二行代码的用途吗?点击下拉列表后我们无法直接选择所需的元素?

HTML - >



<td class="environmentTd" required="">
   <div class="ui fluid search dropdown env selection">
      <select>
         <option value="SB">Sandbox</option>
         <option value="DEV">Development</option>
         <option value="QA">Test</option>
         <option value="PROD">Production</option>
         <option value="PP">Pre Production</option>
         <option value="UAT">UAT</option>
         <option value="DR">DR</option>
      </select>
      <i class="dropdown icon"></i><input class="search" autocomplete="off" tabindex="0">
      <div class="text">Sandbox</div>
      <div class="menu transition hidden" tabindex="-1">
         <div class="item active selected" data-value="SB">Sandbox</div>
         <div class="item" data-value="DEV">Development</div>
         <div class="item" data-value="QA">Test</div>
         <div class="item" data-value="PROD">Production</div>
         <div class="item" data-value="PP">Pre Production</div>
         <div class="item" data-value="UAT">UAT</div>
         <div class="item" data-value="DR">DR</div>
      </div>
   </div>
</td>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:1)

你真的不需要点击下拉列表。你需要找到下拉列表作为WebElement,将其转换为SelectElement并使用它的类方法来选择选项。

我假设,在提供的代码中,您单击下拉列表,然后单击带有选项的已打开字段。但我认为这是很多不必要的行动。除非您有任何脚本,由必须测试的点击触发。

答案 1 :(得分:1)

如果你的选择标签在DOM中不可见,而不点击下拉列表,只需使用第三行

Select select = new Select(driver.findElement(By.cssSelector("select")));
select.selectByValue("QA");

否则,单击下拉列表,该下拉列表可能会生成DIV

class="menu transition hidden"

然后您可以使用select行。

答案 2 :(得分:-2)

从您的描述中可以看出SELECT元素在第二次点击发生之前是不可见的。第二次点击也可能通过Javascript创建SELECT元素。您可以使用Chrome devtools进行调查,并在第二次点击发生之前搜索{# /** * @file * Default theme implementation to display a single page. * * The doctype, html, head and body tags are not in this template. Instead they * can be found in the html.html.twig template in this directory. * * Available variables: * * General utility variables: * - base_path: The base URL path of the Drupal installation. Will usually be * "/" unless you have installed Drupal in a sub-directory. * - is_front: A flag indicating if the current page is the front page. * - logged_in: A flag indicating if the user is registered and signed in. * - is_admin: A flag indicating if the user has permission to access * administration pages. * * Site identity: * - front_page: The URL of the front page. Use this instead of base_path when * linking to the front page. This includes the language domain or prefix. * * Navigation: * - breadcrumb: The breadcrumb trail for the current page. * * Page content (in order of occurrence in the default page.html.twig): * - title_prefix: Additional output populated by modules, intended to be * displayed in front of the main title tag that appears in the template. * - title: The page title, for use in the actual content. * - title_suffix: Additional output populated by modules, intended to be * displayed after the main title tag that appears in the template. * - messages: Status and error messages. Should be displayed prominently. * - tabs: Tabs linking to any sub-pages beneath the current page (e.g., the * view and edit tabs when displaying a node). * - action_links: Actions local to the page, such as "Add menu" on the menu * administration interface. * - node: Fully loaded node, if there is an automatically-loaded node * associated with the page and the node ID is the second argument in the * page's path (e.g. node/12345 and node/12345/revisions, but not * comment/reply/12345). * * Regions: * - page.header: Items for the header region. * - page.navigation: Items for the navigation region. * - page.navigation_collapsible: Items for the navigation (collapsible) region. * - page.highlighted: Items for the highlighted content region. * - page.help: Dynamic help text, mostly for admin pages. * - page.content: The main content of the current page. * - page.sidebar_first: Items for the first sidebar. * - page.sidebar_second: Items for the second sidebar. * - page.footer: Items for the footer region. * * @ingroup templates * * @see template_preprocess_page() * @see html.html.twig */ #} <div class="fixed-bg"></div> <div class="i-large"></div> <div class="i-medium"></div> <div class="i-small"></div> {# Navigation (collapsible first) #} {% if page.navigation_collapsible_first %} <div id="navbar-collapse-first" class="navbar-collapse-first collapse width navbar-fixed-top"> {{ page.navigation_collapsible_first }} </div> {% endif %} {% set container = theme.settings.fluid_container ? 'container-fluid' : 'container' %} {# Navbar #} {% if page.navigation_menu_first or page.navigation_indicator_first or page.navigation_logo or page.navigation_indicator_second or page.navigation_menu_second or page.navigation_collapsible_first or page.navigation_collapsible_second %} {% block navbar %} {% set navbar_classes = [ 'navbar', theme.settings.navbar_inverse ? 'navbar-inverse' : 'navbar-default', theme.settings.navbar_position ? 'navbar-' ~ theme.settings.navbar_position|clean_class : container, ] %} <header{{ navbar_attributes.addClass(navbar_classes) }} id="navbar" role="banner"> {% if not navbar_attributes.hasClass(container) %} <div class="{{ container }}"> {% endif %} <div class="navbar-header"> {{ page.navigation_menu_first }} {{ page.navigation_notification_first }} {{ page.navigation_logo }} {{ page.navigation_menu_second }} {{ page.navigation_notification_second }} {# .btn-navbar is used as the toggle for collapsed navbar content #} </div> {% if not navbar_attributes.hasClass(container) %} </div> {% endif %} </header> {% endblock %} {% endif %} {# Navigation (collapsible second) #} {% if page.navigation_collapsible_second %} <div id="navbar-collapse-second" class="navbar-collapse-second collapse width navbar-fixed-top"> {{ page.navigation_collapsible_second }} </div> {% endif %} {# Main #} {% block main %} <div role="main" class="main-container {{ container }} js-quickedit-main-content"> <div class="row"> {# Header #} {% if page.header %} {% block header %} <div class="col-sm-12" role="heading"> {{ page.header }} </div> {% endblock %} {% endif %} {# Sidebar First #} {% if page.sidebar_first %} {% block sidebar_first %} <aside class="col-md-3" role="complementary"> {{ page.sidebar_first }} </aside> {% endblock %} {% endif %} {# Content #} {% set content_classes = [ page.sidebar_first and page.sidebar_second ? 'col-sm-6', page.sidebar_first and page.sidebar_second is empty ? 'col-md-9', page.sidebar_second and page.sidebar_first is empty ? 'col-md-9', page.sidebar_first is empty and page.sidebar_second is empty ? 'col-sm-12' ] %} <section{{ content_attributes.addClass(content_classes) }}> {# Highlighted #} {% if page.highlighted %} {% block highlighted %} <div class="highlighted">{{ page.highlighted }}</div> {% endblock %} {% endif %} {# Breadcrumbs #} {% if breadcrumb %} {% block breadcrumb %} {{ breadcrumb }} {% endblock %} {% endif %} {# Action Links #} {% if action_links %} {% block action_links %} <ul class="action-links">{{ action_links }}</ul> {% endblock %} {% endif %} {# Help #} {% if page.help %} {% block help %} {{ page.help }} {% endblock %} {% endif %} {# Content #} {% block content %} <a id="main-content"></a> {{ page.content }} {% endblock %} </section> {# Sidebar Second #} {% if page.sidebar_second %} {% block sidebar_second %} <aside class="col-md-3" role="complementary"> {{ page.sidebar_second }} </aside> {% endblock %} {% endif %} </div> </div> {% endblock %} {% if page.footer %} {% block footer %} <footer class="footer {{ container }}" role="contentinfo"> {{ page.footer }} </footer> {% endblock %} {% endif %} 元素。查看它是否存在或可能存在但不可见。然后单击第二个元素,查看HTML如何更改。如果没有访问该网站,那就是我们能提供的解释。这不是我会担心的事情。这就是网站设计的方式。