Selenium Components Examples

BaseComponent.java

public class BaseComponent extends RemoteWebElement {
	private WebElement root = null; // Abstract the root out of each component class
	protected By by = null;	 // Abstract the By for the root out of each component class
	private boolean isVisibilityRequired = true; // is visibility of the component required

	// Constructor that uses a WebElement Object
	// This means it does not have a qa selector in the DOM
	// This is also useful for constructing lists of components
	public BaseComponent(WebElement root, String attribute){
		this.root = root;

		if(!attribute.isEmpty()){
			this.by = formatSelector(attribute, getAttribute(attribute));
		}
	}

	// Constructor that uses a By object
	// ex. new BaseComponent(
	public BaseComponent(By by) { this(by, true);}

	// Constructor that uses a selector with an attribute and value pair 
	// i.e. "qa-selector=name"
	protected BaseComponent(String identifier, String value, boolean isVisibilityRequired) { 
		this.by = formatSelector(identifier, value);
		this.isVisibilityRequired = isVisibilityRequired;
	}

	 // Constructor that uses a selector with just an attribute i.e. "qa-selector"
	protected BaseComponent(String identifier, boolean isVisibilityRequired) { 
		this.by = formatSelector(identifier); 
		this.isVisibilityRequired = isVisibilityRequired;
	}

	// Base Component API
	public WebElement getRoot() {
		if(this.root == null) {
			setRoot();
		}
		else if (BrowserDriver.elementIsStale(this.root)) {
			setRoot();
			LOGGER.info("This element is stale, setting root again with instance's By selector");
		}
		return root;
	}

	// Example methods - these methods will ensure that the root element is used and not some other element

	@Override
	public String getAttribute(String attribute) { /* get root element's attribute value */ }
	public boolean isDisplayed() { /* heck the root element is displayed */ }

	@Override
	public String getText() { /* get the text under the root element */ }

	@Override
	public void click() { /* click the root element, wait for clickable if needed */ }

	@Override
	public void clear() { /* clear the element and wait if needed */ }
    public void scrollTo() { /* scroll to the root */ }

    @Override
    public void sendKeys(String keys){ /* send key input to component */ }

	// Continue with any other methods that all components should have inherently
	// This might include many overrides of or similar methods to RemoteWebElement methods

	// Base Component Private Methods
	// set the root with visibility when needed
	private void setRoot() {
		this.root = isVisibilityRequired ?
			WaitUtils.waitForVisibilityOfElement(by) : FindUtils.findElement(by);
	}

	// By selector formatting helpers
	private By formatSelector(String attribute) {
		return By.cssSelector(String.format("[%s]", attribute));
	}

	private By formatSelector(String attribute, String value) {
		return By.cssSelector(String.format("[%s=\'%s\']", attribute, value));
	}
}

CheckboxSteps.java

public class CheckboxSteps {
	Page page = new Page();
	
	@And("^I select the \"([^\"]*)\" checkbox$")
	public void method(String name){
		page.selectCheckboxByName(name)
	}
}

CheckboxV1.java

public class CheckboxV1 {
    private static final String ID = "qa-checkbox"; // attribute of root checkbox element
    private static final By SELECTOR = By.cssSelector("[" + ID + "]");
    private static final String STATE = "qa-checkbox-state"; // checkbox checked or not

    protected WebElement root; // storage for the root element
    
    // make a checkbox using the default SELECTOR
    public CheckboxComponentV1() { this.root = driver.findElement(SELECTOR)}

    // make a checkbox using some other WebElement
    public CheckboxComponentV1(WebElement root) { this.root = root }

    // make a checkbox using some other By
    public CheckboxComponentV1(By by) { this.root = driver.findElement(by) }
	
	// make a checkbox using a named selector in format qa-checkbox='name'
	public CheckboxComponentV1(String name) { driver.findElement(By.cssSelector("[" + ID + "=\"" + name + "\"]")); }

	// Component API
	// You should make these mirror the component in the app as closely as possible

	// This just gets the current instance's root element
	public WebElement getRoot(){ return this.root }

	public void click() {
		try {
			getRoot().click();
		}
		catch (WebDriverException e) {
			this.toggleWithKeyboard();
		}
	}

	public void toggleWithKeyboard() {
		getRoot().sendKeys(Keys.ENTER);
	}

// Other common methods for a checkbox like checking the box, unchecking and isChecked
}

CheckboxV2.java

public class CheckboxV2 extends BaseComponent {
    private static final String ID = "qa-checkbox"; // attribute of root checkbox element
    private static final String STATE = "qa-checkbox-state"; // checkbox checked or not
	private static final Keys TOGGLE_KEY = Keys.ENTER;

	public CheckBox(WebElement root) {super(root, ID);}
	public CheckBox(By by) { super(by); }
	public CheckBox(String name) {super(ID, name, true);}

	@Override
	public void click() {
		try {
			click();
		}
		catch (WebDriverException e) {
			this.toggleWithKeyboard();
		}
	}

	public void toggleWithKeyboard() {
		sendKeys(TOGGLE_KEY);
	}

	// Other common methods for a checkbox like checking the box, unchecking and isChecked
}

Page.java

public class Page {
	public void selectCheckboxByName(String Name){
		Checkbox checkbox = new Checkbox(name);
		checkbox.click();
        Assert.assertTrue(checkbox.isChecked());
    }
}