_selenide

TL;DR - Show Me The Code

3-work-with-frames/code/selenide/src/test/java/com/elemental/selenium/FramesTest.java

package com.elemental.selenium;

import com.codeborne.selenide.SelenideElement;
import org.junit.jupiter.api.Test;
import org.openqa.selenium.By;

import static com.codeborne.selenide.Condition.text;
import static com.codeborne.selenide.Selenide.$;
import static com.codeborne.selenide.Selenide.open;
import static com.codeborne.selenide.Selenide.switchTo;

public class FramesTest {
    @Test
    public void exampleOne() {
        open("https://the-internet.herokuapp.com/nested_frames");
        switchTo().frame("frame-top");
        switchTo().frame("frame-middle");
        $("#content").shouldHave(text("MIDDLE"));
    }

    @Test
    public void exampleTwo() {
        open("https://the-internet.herokuapp.com/tinymce");
        switchTo().frame("mce_0_ifr");

        SelenideElement editor = $(By.id("tinymce"));
        editor.shouldHave(text("Your content goes here."));
        editor.setValue("Hello World!");
        editor.shouldHave(text("Hello World!"));
        
        switchTo().defaultContent();
        $("h3").shouldHave(text("An iFrame containing the TinyMCE WYSIWYG Editor"));
    }
}

Check out the complete solution

Code Walkthrough

Importing Libraries

First, we pull in our requisite classes

• for annotations (e.g., org.junit.jupiter.api.Test),
• opening the browser with Selenide (e.g., com.codeborne.selenide.Selenide.open),
• Selenide api for frames (e.g., com.codeborne.selenide.Selenide.switchTo)

Example 1

Our first test is exampleOne. In it, we'll step through an example of nested frames from the-internet.

With Selenide's .switchTo() method we can easily switch to the frame we want. When using it for frames (e.g., driver.switchTo().frame();) it accepts either an ID or name attribute. But in order to get the text of the middle frame (e.g., a frame nested within another frame), we need to switch to the parent frame (e.g., the top frame) first and then switch to the child frame (e.g., the middle frame).

Once we've done that we're able to find the element we need, grab its text, and assert that it's what we expect.

Example 2

Here is a more likely example you'll run into -- working with a WYSIWYG Editor like TinyMCE. You can see the page we're testing here.

Once the page loads we switch into the frame that contains TinyMCE and:

• check the original text
• input another text
• check the new text

Keep in mind that if we need to access a part of the page outside the frame we're currently in we'll need to switch to it. Thankfully Selenide has a method that enables us to quickly jump back to the top level of the page -- switchTo().defaultContent().

More methods for frames

Selenide has more methods for working with frames, check:

• switchTo().innerFrame()
• switchTo().frame("id", Duration.ofSeconds(6)); // switch with custom timeout

Executing the Test

Before executing the test, we need to make sure the required dependencies are declared on the pom.xml file.

Toggle to see the pom.xml file.

3-work-with-frames/code/selenide/pom.xml

<project>
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.elemental.selenium</groupId>
    <artifactId>tips-selenide-work-with-frames</artifactId>
    <version>1.0.0</version>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.source>17</maven.compiler.source>
        <maven.compiler.target>17</maven.compiler.target>
    </properties>

    <dependencies>
        <dependency>
            <groupId>com.codeborne</groupId>
            <artifactId>selenide</artifactId>
            <version>7.5.1</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.junit.jupiter</groupId>
            <artifactId>junit-jupiter-engine</artifactId>
            <version>5.11.2</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-simple</artifactId>
            <version>2.0.16</version>
            <scope>test</scope>
        </dependency>
    </dependencies>
</project>

Check out the complete solution

Finally, we can run the test by executing mvn test from the command-line.