使用Selenium进行单元测试Silverlight

Selenium is a web testing tool that runs directly in the browser. That means it's all JavaScript. It'll run on the Three Major OSes and on the Three Major Browsers (and others!), so that's cool. There's even a recorder/playback IDE called Selenium IDE that takes the form of a Firefox plugin.

Selenium是直接在浏览器中运行的Web测试工具。 这意味着全部是JavaScript。 它可以在三个主要的操作系统和三个主要的浏览器(以及其他浏览器)上运行，这很酷。 甚至还有一个名为Selenium IDE的记录器/播放IDE，它采用Firefox插件的形式。

One of the things that's particularly interesting about Selenium is that it uses HTML Tables as its input Domain Specific Language. Go ahead and read that sentence again just to drink it in.

Selenium尤其令人感兴趣的一件事是，它使用HTML表作为其输入的特定于域的语言。 继续阅读该句子，然后再喝。

For example, if you had a page called "/default.html" and on that page there was a button called "myButton" here's the code to open the page and click that button. 

例如，如果您有一个名为“ /default.html”的页面，并且在该页面上有一个名为“ myButton”的按钮，这是打开页面并单击该按钮的代码。

<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">SeleniumTest</td></tr>
</thead><tbody>
<tr>
    <td>open</td>
    <td>/Default.html</td>
    <td></td>
</tr>
<tr>
    <td>click</td>
    <td>myButton</td>
    <td></td>
</tr>
</tbody></table>

This would be a "test" page and you'll also need a master "Suite" that would contain many tests. A Suite is just a table of tests:

这将是一个“测试”页面，并且您还将需要一个包含许多测试的母版“套房”。 套件只是测试表：

<table>
<tr><td><b>Suite Of Tests</b></td></tr>
<tr><td>
<a href="./SeleniumTest.html">Test Suite</a>
</td></tr>
</table>

Because of cross-site scripting issues, you have to install Selenium (just download the zip and upload the contents to your website) on your server and visit the pages from there. For example, here's the Selenium Test Runner on my server here at Hanselman.com.

由于跨站点脚本问题，您必须在服务器上安装Selenium(只需下载zip并将内容上载到您的网站)，然后从那里访问页面。 例如，这是我服务器上Hanselman.com上的Selenium Test Runner 。

As Selenium is all JavaScript, I thought it'd be nice to make sure it can test Silverlight applications. I can see how a testing framework that could easily interact with Silverlight would be a useful thing, so I set off to prove the concept.

由于Selenium都是JavaScript，因此我认为确保它可以测试Silverlight应用程序会很不错。 我可以看到可以轻松与Silverlight交互的测试框架将是一件有用的事情，因此我着手证明这一概念。

First, I made a super-simple XAML of a TextBlock and a Circle:

首先，我制作了一个非常简单的TextBlock和Circle的XAML：

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ButtonSharp="clr-namespace:ButtonSharp;assembly=ClientBin/ButtonSharp.dll"
    x:Class="ButtonSharp.Page;assembly=ClientBin/ButtonSharp.dll"
    Width="320" Height="240"
    Background="White"
    x:Name="rootCanvas"
    >
    <Ellipse Fill="#FFFFFFFF" Stroke="#FF000000" x:Name="Circle" 
       Width="169" Height="169" Canvas.Left="81" Canvas.Top="32"/>
    <TextBlock x:Name="MyText" Text="Hello World from my Script Tag"/>
</Canvas>

In the code-behind I made a few Scriptable methods. By marking them Scriptable, they are made available to the "outside world" - in this case, JavaScript.

在后面的代码中，我提出了一些可编写脚本的方法。 通过将它们标记为可写脚本，它们可用于“外部世界”(在本例中为JavaScript)。

[Scriptable]
    public partial class Page: Canvas
    {
        public Page()
        {
            Loaded += new EventHandler(Page_Loaded);
        }

        TextBlock tb = null;
        Ellipse el = null;

        void Page_Loaded(object o, EventArgs e)
        {
            WebApplication.Current.RegisterScriptableObject("scott", this);
            tb = (TextBlock)this.FindName("MyText");
            el = (Ellipse)this.FindName("Circle");
        }

        [Scriptable]
        public void SetCircleColor()
        {
            tb.Text = "Hello from C#";
            el.Fill = new SolidColorBrush(Color.FromRgb(0xFF, 0x00, 0x00));

        }

        [Scriptable]
        public string GetCircleColor()
        {
            SolidColorBrush b = el.Fill as SolidColorBrush;
            return b.Color.ToString();
        }
}

The code does two useful things. First, it registers the class with the WebApplication via RegisterScriptableObject and names it "scott."  You'll see later where we refer to "scott" in JavaScript and you'll know we mean this class. Second, it finds the TextBlock and the Ellipse and squirrels them away for later use.

该代码做了两件事。 首先，它通过RegisterScriptableObject向WebApplication注册该类，并将其命名为“ scott”。 稍后您将看到我们在JavaScript中引用“ scott”的地方，并且您将知道我们的意思是此类。 其次，它找到TextBlock和Ellipse并将它们松散起来以备后用。

Back over on the outside, in the HTML page's JavaScript, I make two silly functions:

回到外面，在HTML页面JavaScript中，我做了两个愚蠢的功能：

<script type="text/javascript">
    function changeColor()
    {
        var control = document.getElementById("SilverlightControl");
        control.Content.scott.SetCircleColor();
    }
    function getColor()
    {
        var control = document.getElementById("SilverlightControl");
        thing = control.Content.scott.GetCircleColor();
        alert(thing);
    }
</script>

Notice where we call the two managed C# methods via our "scott" object. Then I add two regular HTML buttons:

注意在哪里我们通过“ scott”对象调用了两个托管的C＃方法。 然后添加两个常规HTML按钮：

<input type="button" name="changeColor" value="Change Color" onclick="changeColor()"/>
<input type="button" name="checkColor" value="Check Color" onclick="getColor()"/>

You click one button and it calls changeColor which should make make the Circle red, and the other will ask the Circle what color it is and display the result in a JavaScript alert. You're welcome to run this little thing here if you like.

您单击一个按钮，它将调用changeColor，这将使Circle变为红色，另一个按钮将询问Circle是什么颜色，并将结果显示在JavaScript警报中。 如果愿意，欢迎您在此处运行此小程序。

Note that you WILL need the Silverlight 1.1 Alpha Refresh first.

请注意，您将首先需要Silverlight 1.1 Alpha Refresh 。

Now I make a Selenium Test like this. You can also use the Selenium IDE to record, write manually, step through and save tests if you're not into the whole Notepad thing.

现在，我进行这样的Selenium测试。 如果您不喜欢整个记事本，也可以使用Selenium IDE进行记录，手动编写，逐步执行并保存测试。

<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">SeleniumTest</td></tr>
</thead><tbody>
<tr>
    <td>open</td>
    <td>http://www.hanselman.com/silverlight/seleniumtest/ButtonSharp/Default.html</td>
    <td></td>
</tr>
<tr>
    <td>click</td>
    <td>changeColor</td>
    <td></td>
</tr>
<tr>
    <td>click</td>
    <td>checkColor</td>
    <td></td>
</tr>
<tr>
    <td>assertAlert</td>
    <td>#FFFF0000</td>
    <td></td>
</tr>
</tbody></table>

The Selenium Reference is excellent and contains all the commands you can use. Remember, each command is one line in  test table like:

Selenium参考非常出色，包含您可以使用的所有命令。 请记住，每个命令在测试表中都是一行，例如：

command

target

value

命令

目标

值

And there's many you can use. You can also make your own by making a file called user-extensions.js, and there's lots of details on the Selenium site. You can also use actual JavaScript in the targets and values if you include 'javascript{ }' in the parameter.

还有很多可以使用的。 您也可以通过创建一个名为user-extensions.js的文件来制作自己的文件，Selenium网站上有很多详细信息。 如果参数中包含“ javascript {}”，则还可以在目标和值中使用实际JavaScript。

I'm sure that if I knew JavaScript better I could better access the Silverlight object and test all kinds of things. I'll leave this exercise to the Smarter Than I Reader.

我敢肯定，如果我对JavaScript有更好的了解，那么我可以更好地访问Silverlight对象并测试各种东西。 我将把这项练习留给“比我聪明的读者”。

You can pass parameters to the Selenium Test Reader like the test file via ?test= etc. If you want to run my Silverlight App inside the Selenium Test Runner in your own browser, just go here. Do note the format of the URL. You can also just visit the runner and enter the URLs yourself. You can have as many tests as you like in the suite.

您可以通过？test =等将参数像测试文件一样传递给Selenium Test Reader。如果您想在自己的浏览器中的Selenium Test Runner中运行我的Silverlight应用，请转到此处。 请注意URL的格式。 您也可以只访问跑步者并自己输入URL。 您可以在套件中进行任意数量的测试。

NOTE: When you startup the runner, change these settings for a more dramatic experience. Turn the speed down to Slow with the slider, and click Highlight elements.  Then click either of the Green Play Buttons.

注意：启动跑步机时，请更改这些设置以获得更生动的体验。 使用滑块将速度调低至“慢”，然后单击“突出显示元素” 。 然后单击任一绿色播放按钮。

It'd be interesting what kinds of community extensions to Silverlight could be created for Selenium to make it even easier. I also wonder how well Watir or Watin can interact with Silverlight.

可以为Selenium创建什么样的Silverlight社区扩展很有趣，这使它变得更加容易。 我也想知道Watir或Watin与Silverlight互动的程度如何。

翻译自: https://www.hanselman.com/blog/unit-testing-silverlight-with-selenium