Week-1 task Completed

[shailesh1028]

Week-1 Task

Layout testing: Created test to check the different version/layout of preview based on the API data. This will help when we run the tests on different viewports.
Apart from this, added an event test that includes hovering and clicking over the span to generate the preview.
Error Found: The close button does not work in all other modes except in Standard mode.

[jpita]

never use waits unless absolutely needed, which is not the case here, delete them all.
cypress handles waits automatically

[shailesh1028]

The wait is required in my system as it takes time to load the changes. I have removed it while pushing the current changes.

[jpita]

for slow networks u can use
https://docs.cypress.io/guides/references/configuration#Timeouts
in the configuration file cypress.json to increase the timeout

[jpita]

why this?

[shailesh1028]

It is required when the preview reacts unexpectedly due to some issues(mainly connectivity issues as it delays the response ) so this command prevents the cypress test to fail due to the errors generated from our app.

[jpita]

a test should always fail whenever something goes wrong, this shouldn't be used

[jpita]

this should be in a page-object, no selectors here that might be useful for other tests

[shailesh1028]

I do understand your concern. But those classes are added during runtime to render the different layouts. Thereby it is necessary to check whether they are added or not.

[jpita]

so don't use commands.js for this, use page-objects elements that are only used searched for when needed.
avoid using commands.js for specific test logic, only when it's for actions on the app that always use present elements like we do here - https://github.com/wikimedia/wikipedia-kaios/blob/main/cypress/support/commands.js

u can delete most of ur commands.js code and move it to test and page-object files

[jpita]

tabs and spaces, format the code correctly

[jpita]

1. run npx eslint cypress --fix
2. install the needed dependencies
3. put this on the .eslintrc.js file

module.exports = {
  env: {
    browser: true,
    es6: true
  },
  extends: [
    'eslint:recommended',
    'wikimedia/client',
    "plugin:cypress/recommended"
  ],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
    require: true
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module'
  },
  rules: {
    semi: [2, "never"],
    'no-nonoctal-decimal-escape': 'off',
    "no-only-tests/no-only-tests": "error",
    "cypress/no-unnecessary-waiting": "warn"
  },
  "plugins": [
    "cypress",
    "no-only-tests"
  ],
}

4. run npx eslint cypress --fix
5. fix the issues

[jpita]

did u do steps 4 and 5 from my previous comment?

[jpita]

why not do
cy.get('div.wikipediapreview-footer')

only instead of get+find?

[jpita]

you don't need the check.js class, delete it and add the methods to check for elements inside the preview page object.
check what we did in the kaios code https://github.com/wikimedia/wikipedia-kaios/tree/main/cypress/page-objects.

when u have a page object class, you can create a method inside that page object to check for the presence of the elements.
the same way u would have a login method inside the login page object.
the purpose is to keep the code organised and easy to change when there's a selector change or a UI change.
u can read up on page-object
https://www.guru99.com/page-object-model-pom-page-factory-in-selenium-ultimate-guide.html
https://www.browserstack.com/guide/page-object-model-in-selenium

if u don't understand what I mean we can talk about this during a meeting.

P.S.: similarly to the kaios files, ur page objects need to end in page.js. If u have some files that are not page-objects please remove them from the folder and create a different one, for example helpers