Coder Social home page Coder Social logo

disco-qa-assessment's Introduction

Test Strategy

Tool Selection

Selected Playwright (vs Cypress and Selenium) because:

  • Similar ease of use and setup to Cypress (setup, no drivers, built in waits, built in reporting)
  • Less limitations and better performance (faster execution, no in-browser memory errors at scale)
  • Good support (Microsoft backed, frequent updates and fastest growing community)

Interactivity and Functionality Testing

Analysed Pricing page and determined the following Scenarios around key User flows:

  • User wants to Pay Annually, moves sliders to get an estimate, clicks Get Started.
  • User reviews full feature breakdown and tooltips, clicks Get in touch (not completed due to time constraints)
  • User wants to view Catalogs.
  • User wants to view the Artist plan.

Checked to ensure the scenarios covered all the interactive elements on the page:

  • Toggle button
  • Plan Cards:
    • User Slider
    • Files Slider
    • Get started buttons
  • Catalogs link
  • Artist plan link
  • Get in touch email link
  • Tooltips on hover (not completed due to time constraints)

Added visual test for screenshot comparison.

Business Logic and Accuracy

Analysed pricing logic and determined scenarios:

  • 10% discount for Annual
  • Plus Plan User Prices
  • Plus Plan File Prices

(other scenarios not implemented due to time constraints)

  • Plus Plan User + File Prices
  • Plus Plan User + File Prices + Discount
  • Pro Plan User Prices
  • Pro Plan File Prices
  • Pro Plan User + File Prices
  • Pro Plan User + File Prices + Discount

Challenges

  • Locating specific elements is messy because all have generic class names (e.g. plan price values, sliders, get started button). Specific element test-ids could help with this.
  • Implemented a subset of the pricing calculation tests using the formulas to fulfil the criteria. However in practise I would not recommend testing this type of calculation logic at the E2E layer because it is very messy in terms of feeding the input values. As you can see in the test, at this layer it is simulating a user manually clicking or dragging the slider which is good to verify but does not need to cover all the calulcation permutations. Would be better to verify all the calculating at the unit test layer with some type of mocks that can more easily set the values the slider represents (e.g. react-testing-library can just pump in a value with fireEvent.change(sliderElem, { target: { value: 100} })).

disco-qa-assessment's People

Contributors

seanyyyyyy avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.