Best way to handle filling fields when behat testing and fields have the same name - behat

Question

I have a login page for a site that has three types of users. The user clicks on his/her type and the un/pw field appears, depending on whatever type the user clicks on. However, in the page source all three forms are there but two are hidden depending on which type has been selected. I'm trying to write a behat test to test logging each type of user in. My behat test looks like this:
#javascript #core
Feature: Secure Login
As a User
I expect to be asked for my credentials
So that I can use the system securely
Background:
Given I am logged out
Scenario: Failed User1 Login
When I go to user1 interface
When I submit incorrect user1 credentials
Then I should stay logged out
And I should see "The username or password entered does not match our records."
Scenario: Successful User1 Login
When I go to user1 interface
When I submit correct user1 credentials
Then I should be logged in to user1 interface
Scenario: Failed User2 Login
When I go to user2 interface
When I submit incorrect user2 credentials
Then I should stay logged out
And I should see "The username or password entered does not match our records."
Scenario: Successful User2 Login
When I go to user2 interface
When I submit correct user2 credentials
Then I should be logged in to user2 interface
When I view the page source, here's what I see for the forms:
<form id='user1' name='user1' method="post" role="form">
<input type="hidden" name="subsystem" value="user1"/>
<label for="un1" class="label">Username</label>
<div id="un_inst1"class="label_instruction"></div>
<input autocapitalize="off" id="un1" autocorrect="off" type="text" name="username" value="" style="margin-bottom: 10px" aria-describedby="un_inst1">
<label for="pw1" class="label">Password</label>
<div id="pw_inst1"class="label_instruction"></div>
<input type="password" id="pw1" name="password" style="margin-bottom: 10px;" aria-describedby="pw_inst1">
<div class="login_buttons">
<input type="submit" value="Go" class="btn_go input-submit">
<input type="reset" class="btn_reset input-reset" value="Reset">
<br/>
</div>
</form>
<form id='user2' name='user2' method="post" role="form">
<input type="hidden" name="subsystem" value="resident"/>
<div class="usr-login label">Resident Login</div>
<label for="un2" class="label">Username</label>
<div id="un_inst2"class="label_instruction"></div>
<input autocapitalize="off" autocorrect="off" type="text" id="un2" name="username" value="" style="margin-bottom: 10px" aria-describedby="un_inst2">
<label for="pw2" class="label">Password</label>
<div id="pw_inst2"class="label_instruction"></div>
<input type="password" id="pw2" name="password" style="margin-bottom: 10px;" aria-describedby="pw_inst2">
<div class="login_buttons">
<input type="submit" value="Go" class="btn_go input-submit">
<input type="reset" class="btn_reset input-reset" value="Reset">
<br/>
</div>
</form>
In my featurecontext file, I have these functions:
public function iSubmitIncorrectCredentials($interface)
{
$button ='Go';
return $this->login("tester" . time(), "bar", $button);
}
private function login($username, $password, $btn)
{
$this->fillField('username', $username);
$this->fillField('password', $password);
$this->pressButton($btn);
}
Where the $interface is for user1 or user2. The problem that I'm having is that the tests for user1 pass, but when I get to user2 tests I get this error:
{"errorMessage":"Element is not currently interactable and may not be manipulated","request":{"headers":{"Accept":"application/json;charset=UTF-8","Content-Length":"36","Content-Type":"application/json;charset=UTF-8","Host":"127.0.0.1:8643"},"httpVersion":"1.1","method":"POST","post":"{\"value\":[\"tester1479232631\\ue004\"]}","url":"/value","urlParsed":{"anchor":"","query":"","file":"value","directory":"/","path":"/value","relative":"/value","port":"","host":"","password":"","user":"","userInfo":"","authority":"","protocol":"","source":"/value","queryKey":{},"chunks":["value"]},"urlOriginal":"/session/ea0f7000-ab5c-11e6-acb9-5946ec8fdb06/element/:wdc:1479232631203/value"}} (WebDriver\Exception\InvalidElementState)
What I think is happening is that fillField() is trying to find the username field, but there are two, so for user1 the tests work but for user2, I get the error. I'd like some advice on how to handle this, besides changing the name of the un/pw fields.
Thanks

Answer 1

You need to have different selectors for each form. You can do this in few ways:
For the first 2 methods you will need to use another method to fill the elements and click the fields since you will use css selectors.
For example: find the element -> click() and find the element -> setValue()
1) create a method for each type with different selectors
loginWithUser1($username, $password){...}
loginWithUser2($username, $password){...}
loginWithUser3($username, $password){...}
You will need to use css selectors for the elements like:
#user1 input[name=username]
#user1 input[name=password]
2) use the same method and build/read selector from an array based on a parameter
login($username, $password, $role)
{
}
3) use page object functionality
This option will use a method same as the second one but instead of reading selectors from an array you will use a getElement() method and use the methods you need on that object. Please see here an example working with elements
I recommend to try the last option and if you can't make it work to try with the second one.
Tip: Avoid passing parameters in the method that you don't need like $btn from your login method.The method should know about the button element, you need to pass data only.