代码之家 › 专栏 › 技术社区 › King Midas

如何使用带有富文本区域的Vaadin测试台?

vaadin7

King Midas · 技术社区 · 9 年前

我正在使用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 {
}

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

如何测试用户更改此富文本区域的值?它没有实施?

2 回复 | 直到 9 年前

Morfic 8 年前

嗯,是的,这看起来有些工作正在进行中,可能是因为它是一个复杂的组件,具有它提供的所有功能。尽管如此,我们可以稍微解决这些限制,再次利用 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() + "]");

输出

文本=[一些预定义的文本+硒元素添加的其他内容]

King Midas 8 年前

最后,我能够获得选择第一个元素的元素的内容 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);