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

Question

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

在window，我用的是丰富的测试区。这个想法是设计一个测试，在这个测试中这个富文本元素的值被改变来模拟一些用户行为。但是现在我发现我找不到任何方法来改变这个元素的值，也没有得到元素的当前值。

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

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

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

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

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

Answer 1

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

当然，这只是一个起点，还可以进一步增强。如果有人找到一个更优雅的解决方案，我也很想看到...

结构检查

测试class

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 =[Some predefined text + something else added by 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和window之间切换，我只能获取元素的内容，而不能获取元素本身。如果我直接 return 元素以供将来使用，则会获得 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？

How to use the Vaadin Testbench with Rich Text Area?

vaadin7