` on the page. To make the page object find only the `LoginView`, you can either define an `id`:
```java
public class LoginView extends Div {
public LoginView() {
setId("login-view");
}
```
or add a `class name`:
```java
public class LoginView extends Div {
public LoginView() {
addClassName("login-view");
}
```
The page object can then use the `id` as:
```java
@Element("div")
@Attribute(name = "id", value = "login-view")
public class LoginViewElement extends TestBenchElement {
```
or the `class name` as:
```java
@Element("div")
@Attribute(name = "class", contains = "login-view")
public class LoginViewElement extends TestBenchElement {
```
The rest of the page object would be the same in both cases (Template and Java class), the only difference is how you find the element you want to interact with.
> **Note:** You should use `contains` when you are matching `class` or similar multi value attributes, so that `login-view` matches even when there are multiple class names, e.g. `class="dark login-view active"`.
> **Tip:** An `@Attribute` `value` or `contains` property can be set to `Attribute.SIMPLE_CLASS_NAME` to make it match the simple class name of the page object class with any `Element` or `PageObject` suffix removed. As `@Attribute` annotations are inherited, you can add this on a base class for your elements.
> **Note:** All Vaadin component integrations for TestBench can also be considered *page objects* even though they only provide a high level API for a single component. There is no conceptual difference between creating elements for web components and elements for templates or classes representing a whole view.
##
Using a Page Object
To be able to use the helper methods from a page object, you need to get an instance of the page object. You use the standard `ElementQuery` methods to retrieve an instance of your page object, e.g. to handle login in a test you can do:
```java
public class LoginIT extends TestBenchTestCase {
// Driver setup and teardown omitted
@Test
public void loginAsAdmin() {
getDriver().open("http://localhost:8080");
LoginViewElement loginView = $(LoginViewElement.class).first();
loginView.login("admin@vaadin.com", "admin");
// TODO Assert that login actually happened
}
}
```
##
Chaining Page Objects
Whenever an action on a page object results in the user being directed to another view, it is good practice to find an instance of the page object for the new view and return that. This allows test methods to chain page object calls and continue to perform actions on the new view.
For the `LoginViewElement` we could accomplish this by updating the `login` method:
```java
public MainViewElement login(String username, String password) {
getUsernameField().setValue(username);
getPasswordField().setValue(password);
getLoginButton().click();
// Find the page object for the main view the user ends up on
// onPage() is needed as MainViewElement is not a child of LoginViewElement.
return $(MainViewElement.class).onPage().first();
}
```
> **Tip:** When the login view finds the main view element, it automatically validates that the login succeeded or the main view will not be found.
A test method can now do:
```java
@Test
public void mainViewSaysHello() {
getDriver().open("http://localhost:8080");
LoginViewElement loginView = $(LoginViewElement.class).first();
MainViewElement mainView = loginView.login("admin@vaadin.com", "admin");
Assert.assertEquals("Hello", mainView.getBanner());
}
```
You can find a fully functional page object based test example in the demo project at
.
### Extending a Page Object
If you want to add functionality to an existing element, you can extend the original element class and add more helper methods, e.g.
```java
public class MyButtonElement extends ButtonElement {
public void pressUsingSpace() {
....
}
}
```
You can then use your new element by replacing
```java
ButtonElement button = $(ButtonElement.class).id("ok");
...
```
by
```java
MyButtonElement button = $(MyButtonElement.class).id("ok");
button.pressUsingSpace();
```