Question

我正在使用Vaadin Testbench（4.1.0-alpha）为我的应用程序设计一些集成测试（在Vaadin 7.6.1中设计）。

在窗口中，我使用了丰富的测试区域。我们的想法是设计一个测试，其中改变了这个富文本元素的值，模拟了一些用户行为。但是现在我意识到我找不到任何改变这个元素值的方法，也没有得到元素的当前值。

我测试了一些方法。getHTML()获取组件的HTML，而不是设计器的HTML。 getText()获取元素列表（字体颜色，背景和元素的其他选项，但不包含内容）。

然后我希望有特定的类方法来检索值。如果我探索类RichTextAreaElement，似乎没有实现任何方法。此课程中的所有代码均为：

@ServerClass("com.vaadin.ui.RichTextArea")
  public class RichTextAreaElement extends AbstractFieldElement {
}

如您所见，没有声明任何方法。

如何在用户更改此富文本区域的值时进行测试？它没有实现？

Answer 1

嗯，是的，看起来有些工作正在进行中，可能是因为它是一个复杂的组件，具有它提供的所有功能。尽管如此，我们可以稍微解决这些限制，再次使用chrome developer tools（或类似的）和一些自定义类来选择组件（实际上它只是gwt-RichTextArea）。

当然，这只是一个起点，可以进一步加强。如果有人找到一个更好的解决方案，我也很感兴趣...

结构检查

测试类

public class RichTextAreaTest extends TestBenchTestCase {

    @Before
    public void setUp() throws Exception {
        System.setProperty("webdriver.chrome.driver", "D:\\Kit\\chromedriver_win32\\chromedriver.exe");
        setDriver(new ChromeDriver());
    }

    @After
    public void tearDown() throws Exception {
        // TODO uncomment below once everything works as expected
        //getDriver().quit();
    }

    @Test
    public void shouldModifyRichTextArea() throws InterruptedException {
        // class to identify the editor area by
        String editorClass = "gwt-RichTextArea";

        // open the browser
        getDriver().get("http://localhost:8080/");

        // select the first rich text
        RichTextAreaElement richTextArea = $(RichTextAreaElement.class).first();

        // get the editor section which is where we're writing
        WebElement richTextEditorArea = richTextArea.findElement(By.className(editorClass));

        // click inside to make it "editable"
        richTextEditorArea.click();

        // send some keystrokes
        richTextEditorArea.sendKeys(" + something else added by selenium");
    }
}

<强>结果：

获取值的更新

如果您只想获取文本，下面的代码就可以解决问题：

// switch to the editor iframe
getDriver().switchTo().frame(richTextEditorArea);

// get the <body> section where the text is inserted, and print its text    
System.out.println("Text =[" + findElement(By.xpath("/html/body")).getText() + "]");

输出

Text = [某些预定义文本+由selenium添加的其他内容]

Answer 2

最后，我能够获取选择页面的第一个iframe的元素的内容，并搜索body内容。最终代码如下：

String currentWindow = getDriver().getWindowHandle();         
getDriver().switchTo().frame(getDriver().findElement(By.tagName("iframe")));
WebElement webelement = this.findElement(By.xpath("/html/body"));
String text = webelement.getText();
getDriver().switchTo().window(currentWindow);
return text;

由于我需要在iframe和窗口之间切换，我只能获取元素的内容，而不是元素本身。如果我直接返回该元素以供将来使用，则会获得org.openqa.selenium.StaleElementReferenceException: Element belongs to a different frame than the current one - switch to its containing frame to use it异常。

为了更改文本，解决方案非常相似，只使用sendKey函数首先删除现有字符，然后添加新文本：

String currentWindow = getDriver().getWindowHandle();
getDriver().switchTo().frame(getDriver().findElement(By.tagName("iframe")));
WebElement webelement = this.findElement(By.xpath("/html/body"));
// Remove any previous text.
String previousText = webelement.getText();
for (int i = 0; i < previousText.length(); i++) {
    webelement.sendKeys(Keys.DELETE);
}
// Set text.
webelement.sendKeys(text);
getDriver().switchTo().window(currentWindow);

如何使用富文本区域的Vaadin Testbench？

2 个答案: