SeleniumWebDriver拖放处理

HTML ww9992019com 发表于 5 天前

www.hj88818.com开户请拨158944521552019全国高校名单厦门集美区EJaMj8<div style="width:100%;float:left;" class="article-content">

                <input type="hidden" name="article_id" id="article_id" value="21541">
                <input type="hidden" name="catid" id="catid" value="0">

                <p>在本节中,您将学习如何在Selenium WebDriver中执行像拖放这样的复杂操作。</p>

<p>在继续本节之前,先了解一些有关拖放操作的概念。</p>
<p><strong>Selenium WebDriver拖放操作</strong><br>要执行复杂的用户交互,例如拖放,在Selenium WebDriver中有一个<code>Actions</code>类。 使用<code>Actions</code>类,首先构建一系列复合事件,然后使用Action(一个代表单个用户交互的接口)执行它。 在这里使用的<code>Actions</code>类的一些方法是 -</p>
<ul>
<li><code>clickAndHold(WebElement element)</code> - 单击中间的Web元素(不释放)。</li><li><code>moveToElement(WebElement element)</code> - 将鼠标指针移动到web元素的中间而不单击。</li><li><code>release(WebElement element)</code> - 释放左键单击(处于按下状态)。</li><li><code>build()</code> - 生成复合动作</li></ul>
<p>让我们考虑一个测试用例,将自动化以下场景:</p>
<ul>
<li>调用Firefox浏览器</li><li>打开网址:<a href="http://localhost/testing.html">http://localhost/testing.html</a></li><li>拖放文本框上的Yiibai图标</li></ul>
<blockquote>
<p>注:有关文件 - <em>testing.html</em> 的代码在前几章节中已经有给出。</p>
</blockquote>
<p>我们将逐步创建测试用例,以便您完全了解如何在WebDriver中处理拖放操作。</p>
<p><strong>第1步</strong> - 启动Eclipse IDE并打开我们在本教程前几节中创建的现有测试套件“Demo_Test”。</p>
<p><strong>第2步</strong> - 右键单击<em>“src”</em> 文件夹,然后从 <em>New</em> -&gt; <em>Class</em> 创建一个新的类文件。<br><img src="http://f2e.im/u/ww9992019com" alt=""></p>
<p>将类的名称命名为<em>“Dragdrp_Test”</em> ,然后单击“完成”按钮。<br><img src="http://f2e.im/u/ww9992019com" alt=""></p>
<p><strong>第3步</strong> - 开始编写代码。</p>
<p>要调用Firefox浏览器,需要下载Gecko驱动程序并为Gecko驱动程序设置系统属性。已在本教程的前面几篇文章已经讲解过这个问题。可以参考“在Firefox浏览器上运行测试”来了解如何下载和设置Firefox驱动程序的系统属性。<br>以下是为Gecko驱动程序设置系统属性的示例代码:</p>
<pre><code class="lang-java">// System Property for Gecko Driver
System.setProperty("webdriver.gecko.driver","D:\GeckoDriver\geckodriver.exe" );
</code></pre>
<p>之后使用<code>DesiredCapabilities</code>类初始化Gecko Driver。<br>以下是使用<code>DesiredCapabilities</code>类初始化gecko驱动程序的示例代码。</p>
<pre><code class="lang-java">// Initialize Gecko Driver using Desired Capabilities Class
DesiredCapabilities capabilities = DesiredCapabilities.firefox();
capabilities.setCapability("marionette",true);
WebDriver driver= new FirefoxDriver(capabilities);
</code></pre>
<p>结合上述两个代码块,完善启动Firefox浏览器的代码片段。</p>
<pre><code class="lang-java"> // System Property for Gecko Driver
System.setProperty("webdriver.gecko.driver","D:\GeckoDriver\geckodriver.exe" );

// Initialize Gecko Driver using Desired Capabilities Class
DesiredCapabilities capabilities = DesiredCapabilities.firefox();
capabilities.setCapability("marionette",true);
WebDriver driver= new FirefoxDriver(capabilities);
</code></pre>
<p>之后需要编写代码来自动化第二个测试场景(导航到所需的URL),以下是导航到URL的示例代码:</p>
<pre><code class="lang-java">// Launch Website
driver.navigate().to("http://localhost/testing.html");
</code></pre>
<p>到目前为止完整的代码如下所示:</p>
<pre><code class="lang-java">import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.remote.DesiredCapabilities;

public class Dragdrp_Test {

public static void main(String[] args) {

// System Property for Gecko Driver   
    System.setProperty("webdriver.gecko.driver","D:\GeckoDriver\geckodriver.exe" );  
// Initialize Gecko Driver using Desired Capabilities Class  
        DesiredCapabilities capabilities = DesiredCapabilities.firefox();  
        capabilities.setCapability("marionette",true);  
        WebDriver driver= new FirefoxDriver(capabilities);

  // Launch Website  
  driver.navigate().to("http://localhost/testing.html");

}

}
</code></pre>
<p><strong>第4步</strong> - 现在尝试找到<em>易百教程</em> 图标和文本框,以便执行拖放操作,需要定位元素涉及检查其HTML代码。</p>
<p>按照下面给出的步骤找到示例网页上的下拉菜单。</p>
<ul>
<li>打开网址 - <a href="http://localhost/testing.html">http://localhost/testing.html</a></li><li>右键单击易百教程的图标并选择Inspect Element。</li></ul>
<p><img src="http://f2e.im/u/ww9992019com" alt=""></p>
<p>它将启动一个窗口,其中包含易百教程的图标涉及的特定代码。<br><img src="http://f2e.im/u/ww9992019com" alt=""></p>
<p>记下它的<code>id</code>属性值,即:<em>sourceImage</em> ,如下所示:<br><img src="http://f2e.im/u/ww9992019com" alt=""></p>
<p>同样,检看放置图标的文本框及的特定代码。<br><img src="http://f2e.im/u/ww9992019com" alt=""></p>
<p>记下它的<code>id</code>属性,即<em>targetDiv</em>,如下图所示:<br><img src="http://f2e.im/u/ww9992019com" alt=""></p>
<p><strong>第5步</strong> - 要自动化第三和第四个测试场景,需要编写将对易百教程图标执行拖放操作的代码。</p>
<p>下面给出了执行拖放操作的代码片段。</p>
<pre><code class="lang-java">//WebElement on which drag and drop operation needs to be performed
WebElement from = driver.findElement(By.id("sourceImage"));

//WebElement to which the above object is dropped
WebElement to = driver.findElement(By.id("targetDiv"));

//Creating object of Actions class to build composite actions
Actions act = new Actions(driver);

//Performing the drag and drop action
act.dragAndDrop(from,to).build().perform();
</code></pre>
<p>因此,最终测试脚本如下所示:</p>
<pre><code class="lang-java">import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Actions;
import org.openqa.selenium.remote.DesiredCapabilities;

public class Dragdrp_Test {

public static void main(String[] args) {

    // System Property for Gecko Driver   
    System.setProperty("webdriver.gecko.driver","D:\GeckoDriver\geckodriver.exe" );

    // Initialize Gecko Driver using Desired Capabilities Class  
        DesiredCapabilities capabilities = DesiredCapabilities.firefox();  
        capabilities.setCapability("marionette",true);  
        WebDriver driver= new FirefoxDriver(capabilities);


    // Launch Website  
        driver.navigate().to("http://localhost/testing.html");

    //WebElement on which drag and drop operation needs to be performed  
        WebElement from = driver.findElement(By.id("sourceImage"));

    //WebElement to which the above object is dropped  
        WebElement to = driver.findElement(By.id("targetDiv"));

    //Creating object of Actions class to build composite actions  
        Actions act = new Actions(driver);

    //Performing the drag and drop action  
        act.dragAndDrop(from,to).build().perform();   
}

}
</code></pre>
<p><strong>第6步</strong> - 右键单击Eclipse代码,然后选择 : <em>Run As</em> -&gt; <em>Java Application</em> 。<br>执行后,上述测试脚本将启动Firefox浏览器并自动执行所有测试方案。可以看到易百教程的图标将自动放入文本框中。</p>

                <br>
                <p style="text-align:center;float:left;width:100%;margin-top:24px;margin-bottom:18px;">
                        <button class="layui-btn layui-btn-danger" id="btn-reward"> ¥ 我要打赏 </button>  
                        <button class="layui-btn" id="article-perfect">
                            <i class="layui-icon layui-icon-edit"></i>教程纠错
                        </button>
                        <button class="layui-btn layui-btn-normal" id="action-collection">
                            <i class="layui-icon layui-icon-rate"></i>收藏
                        </button>
                </p>



                <div style="width:100%;margin-bottom: 16px; height: 32px;margin-top:18px;float:left;">

                    <span style="float:left;">上一篇:<a href="http://f2e.im/u/ww9992019com" title="Selenium WebDriver处理下拉列表"><i class="layui-icon"></i>
                            Selenium WebDriver处理下拉列表</a></span>
                                            <span style="float:right;">下一篇:<a href="http://f2e.im/u/ww9992019com" style="float:right;" title="下一篇:Selenium WebDriver处理Alert"><i class="layui-icon"></i>
                            Selenium WebDriver处理Alert</a></span>
                                            <div id="googlead" style="float:left;margin-top:8px;">
                        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                        <!-- yiibai下方 -->
                        <ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-1090193214637198" data-ad-slot="6494738921"></ins>
                        <script>
                            (adsbygoogle = window.adsbygoogle || []).push({});
                        </script>
                    </div>
                </div>

                <div style="width:100%;margin-top:18px;float:left;">


            </div>
暂无回复,说出你的观点吧
登录后即可参与回复