- Epic it contributes to.
- {T396139}
- Acceptance criteria
[x] Determine if Page Object Pattern we use ([[ https://www.mediawiki.org/wiki/Selenium/Explanation/Page_object_pattern | Selenium/Explanation/Page object pattern ]]) is the same as in upstream documentation ([[ https://webdriver.io/docs/pageobjects/ | WebdriverIO Page Object Pattern ]]).
- With {T373125} and [[ https://gerrit.wikimedia.org/r/c/mediawiki/core/+/1066709 | 1066709 ]] we have resolved the differences. There is nothing more to do.
[x] ~~If there are significant differences, create one or more tasks to minimize or remove the differences.~~
- No significant differences.
# Context
Since at least 2018 (when this ticket was created) our Page Object Pattern was different that what upstream documentation (WebdriverIO) recommends. The only difference was that upstream was using ECMAScript modules while we were using CommonJS.
Some example code to make it clear there are no longer any significant differences between our code and upstream.
- Main page object
- Login page
- Login test
---
# Main page object
## WebdriverIO: `Page.js`
```lang=js
export default class Page {
// code
}
```
## MediaWiki Core: [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/tests/selenium/wdio-mediawiki/Page.js | tests/selenium/wdio-mediawiki/Page.js ]]
[[ https://gerrit.wikimedia.org/r/c/mediawiki/core/+/1066709/42/tests/selenium/wdio-mediawiki/Page.js | Before ]]
```lang=js
class Page {
// code
}
module.exports = Page;
```
[[ https://gerrit.wikimedia.org/r/c/mediawiki/core/+/1066709/42/tests/selenium/wdio-mediawiki/Page.js | After ]]
```lang=js
export default class Page {
// code
}
```
---
# Login page
## WebdriverIO: `login.page.js`
```lang=js
import Page from './page'
class LoginPage extends Page {
// code
}
export default new LoginPage()
```
## MediaWiki Core: [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/tests/selenium/wdio-mediawiki/LoginPage.js | tests/selenium/wdio-mediawiki/LoginPage.js ]]
[[ https://gerrit.wikimedia.org/r/c/mediawiki/core/+/1066709/42/tests/selenium/wdio-mediawiki/LoginPage.js | Before ]]
```lang=js
const Page = require( './page' );
class UserLoginPage extends Page {
// code
}
module.exports = new UserLoginPage();
```
[[ https://gerrit.wikimedia.org/r/c/mediawiki/core/+/1066709/42/tests/selenium/wdio-mediawiki/LoginPage.js | After ]]
```lang=js
import Page from './Page.js';
class LoginPage extends Page {
// code
export default new LoginPage();
```
---
# Login test
## WebdriverIO: `login.spec.js`
```lang=js
import LoginPage from '../pageobjects/login.page'
// code
})
```
## MediaWiki Core: [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/tests/selenium/specs/user.js | tests/selenium/specs/user.js]]
Before
```lang=js
```
After
```lang=js
import LoginPage from 'wdio-mediawiki/LoginPage.js';
// code
```