In order to test our website and React Native mobile app, we have developed a hybrid framework using webdriver.io and cucumber.io. We currently maintain separate feature files for the same functionality on both the web and mobile platforms.
For example, in Mobile_getMembersDetails.feature:
@mobile
Scenario: As a user, I can view the list of members on the home screen
When I navigate to the home screen
Then I should see the list of members displayedThe corresponding step implementation is as follows:
@when(/^I am on the home screen$/)
public async whenIamOnHomeScreen() {
await mobileLandingPage.clickContinueButton();
await mobileHomePage.clickAllowButton();
expect(await mobileHomePage.isHeaderDisplayed()).toBe(true);
}
@then(/^I should see the members list on mobile home screen$/)
public async thenIshouldSeeMemberslistOnMobileHomeScreen() {
expect(await mobileHomePage.isMemberListIsDisplayed());
}
Furthermore, in Web_getMembersDetails.feature:
@web
Scenario: As a user, I can see the list of members on the home page
When I visit the home page
Then I should see the list of members displayed on the web pageThe corresponding step implementation is as follows:
@when(/^I am on the home page$/)
public async whenIamOnHomePage() {
webHomePage.open();
expect(await webHomePage.isPageLoaded()).toBe(true);
}
@then(/^I can see the members list on web home page$/)
public async thenIshouldSeeMemberslistOnWebHomePage() {
expect(await webHomePage.isMemberListIsDisplayed()).toBe(true);
}
Although the functionality remains the same, the navigation and implementation differ between web and mobile. We are exploring ways to consolidate this into a single feature file and set of steps. One approach is to introduce @web and @mobile tags and determine the test type based on the execution command. However, this introduces complexity with multiple conditional statements. Is consolidating into one feature file not recommended? Your insights would be appreciated. Thank you.
@web @mobile
Scenario: As a user, I can view the list of members on the home page
When I visit the home page
Then I should see the list of members displayed on the web pageThe proposed step implementation is as follows:
@when(/^I am on the home page$/)
public async whenIamOnHomePage() {
if(driver.isMobile()){
await mobileLandingPage.clickContinueButton();
await mobileHomePage.clickAllowButton();
expect(await mobileHomePage.isHeaderDisplayed()).toBe(true);
} else {
webHomePage.open();
expect(await webHomePage.isPageLoaded()).toBe(true);
}
}
@then(/^I can see the members list on web home page$/)
public async thenIshouldSeeMemberslistOnWebHomePage() {
if(driver.isMobile()){
expect(await mobileHomePage.isMemberListIsDisplayed());
} else {
expect(await webHomePage.isMemberListIsDisplayed()).toBe(true);
}
}