Page MenuHomePhabricator

GSOC '21 Proposal: Write Cypress tests for wikipedia-preview
Closed, ResolvedPublic


Profile Information

Name: Shailesh Kanojiya
University: Indian Institute of Technology, Kharagpur, India
Web Profile/Linkedin: shailesh-kanojiya
Github Link: shailesh1028
Resume: Link
Other Communication Method: Google Hangouts & Zulip
Location during GSoC: Bhopal, Madhya Pradesh, India (UTC +5:30)
Typical working hours (include your timezone) during GSoC: Between 10 am to 7 pm (UTC +5:30)


About Wikipedia Preview
The Wikipedia Preview acts as a medium that provides Wikipedia content in the form of contextual information to be available on 3rd party sites. It consists of showing information from Wikipedia projects that involves images, definitions or reading more content related to an article directly from the provider’s website. This will help the third party vendors to retain their users without switching the tabs to look for the definitions.
It helps users to gain contextual details from Wikipedia without actually visiting it. Whenever a reader hovers over a link to an article, a short summary of the subject and an image (if available) will be displayed. Users can gather more information by opting to read more on Wikipedia.

About the Project
The goal of the project is to enhance the working of Wikipedia-Preview by testing the preview against test cases. This involves writing a quality level of tests that checks the preview on different parameters. This will help in identifying the fallback conditions and help in delivering better Preview to the end-users.

What can be implemented?
The project involves writing cypress tests for Wikipedia-Preview. Cypress provides a better interface for writing, running, and debugging standard test cases for the projects developed in javascript.

Possible Mentor(s)

Have you contacted your mentors already?
Yes, I have contacted them.


May 17 - June 7
Community bonding period
* Deep dive into the codebase of wikipedia-preview and understand the structure,layout and functionality of wikipedia-preview.
* Plan the layout of the code structure for developing the test code.
* Discuss the testing flow with the mentors and get their feedback.
* Add feedback in a structured manner in the proposal & task on Phabricator.
* Study the existing plugins that can be used for Desktop and Mobile testing. Document all the useful plugins.
* Integrate the working branch in CircleCI, so that for every test code written in future can be tested on CircleCI.

Week 1
07 June - 13 June
* Layout Testing: Write the test cases for each layout of wikipedia-preview as shown in storybook-static : Loading, Standard, Disambiguation, Error & Offline.
* Test the preview while switching in between different layouts.
Week 2
14 June - 20 June
* Event Testing: Develop tests for the mouse and click events that will be performed by users on target span.
* Test the preview layout by invoking different functions(Onhide, OnShow, OnExpand) on the preview elements.

Week 3
21 June - 27 June
* Popup Testing: Develop the unit test for the distinctive alignment of wikipedia preview, being displayed on the window with respect to the target span and pointer position.
* Preview directional alignment testing: Create tests for the directional alignment (left-right or vice versa) of content in preview based on the content language.

Week 4
28 June - 04 July
* Localization Testing: Test the common keywords of wikipedia-preview for individual languages by using i18 Translation.
* Content and API Testing: Match the content, images and url link provided in wikipedia-preview from the source wikipedia pages.
* Check the content if detectlinks is true.
* Page Movement: Check the page content when returning to the article page after invoking the OnWikiRead event.
* Check the page content on reload/ refresh of the page with the popupId being created.

Week 5
05 July - 11 July
* Improvement based on feedback received from the mentors and others community members.
* Bug fixing and preparing the detailed report.
12 July - 16 July
First evaluation
Week 6
19 July - 25 July
* Gallery testing: Write code for layout testing of the gallery preview slideshow that include sliders,images and its info.
* Check the image loading based on its completeness. If error occurs then check the image loading error elements.
* Test the navigation of images in the gallery slideshow.
* Perform hidefullscreengallery event.
* Inspect the caption of images if expandable.
Week 7
26 July - 01 Aug
* Define all the viewport in Data.json
* Mobile Testing: Test the wikipedia-preview for different viewport by implementing the cypress plugin cy.view()
* Touch popup testing: Create the tests for touch events (OntouchMove).
* Generate tests for addbackgroundScreen and events related to it.
Week 8
02 Aug - 08 Aug
* Cross-Browser Testing: Test the code in different browsers (supported by cypress) and refactor the code accordingly.
* CI integration: Refactor the config.yml in circleci.
* Report generation: Add the feature that automatically generates the report for each failure occurring during testing on CircleCI using mocha reports.
Week 9
09 Aug - 15 Aug
* Prepare the Documentation of the project.
* Write Blogs on the test code.
* Gather all the reviews and edits from the mentors and work on the same.
16 Aug - 20 Aug
Final Evaluation

I have gone through the code base of Wikipedia Preview and developed a flow diagram to represent its working.

Flow-Diagram.jpg (2×4 px, 1 MB)


  • A standard Testing code for each layout of the preview.
  • Quality Testing of different events that can be performed on preview.
  • Develop Localisation testing for different Language-based previews.
  • Functional Test cases for different viewports as well as different browsers on Mobile and Desktop that will cover a large audience set.
  • Creation of tests for multiple browsers that are supported by Cypress (Cross-Browser Testing).
  • A pipeline for testing of code using CircleCI and auto-generation of well-defined reports on performed test cases.
  • A proper research report on cypress plugins that is useful to the project.
  • Full documentation of the project.

Modules of Cypress Test

Modules_of_cypress_test.jpg (2×4 px, 490 KB)


Progress Report

  • I will remain online on hangouts and Zulip during my working hours 10 am to 7 pm (UTC +5:30)
  • I will keep the mentors posted with my weekly reports.
  • I will write blogs on the test cases.
  • I will deliver a report and presentation for the final evaluation.

Where do I plan to publish my source code

  • I will make a new working branch for performing my GSoC Project.
  • I will create a pull request against the wikipedia-Preview Main Branch once the code is fully tested on circleci and the mentors have approved it.

About Me

Personal background
I am a final-year undergraduate student at Indian Institute of Technology, Kharagpur, India. I am pursuing Mining Engineering with a minor in Mathematics and Computing and Micro-specialisation in Entrepreneurship & Innovation. I have been actively involved in OpenSoft(Open Source) Competition in the General Championship held at IIT Kharagpur. I was the head of Web and technical team of SpringFest IIT Kharagpur and led the project for developing various websites and online games for the fest.

How did I hear about this Program?
I heard about GSoC during an event at my college’s Tech meet. Thereafter, I have been excited to apply for Google Summer of Code 2021.

Eligible for Google Summer of Code and Outreachy?
I am applying for Google Summer of Code as I'm ineligible for the Outreachy program. I am only applying for the Project: Wikipedia Preview Cypress Testing.

Will you have any other time commitments during the duration of the program?
My expected graduation date is mid of June but due to the ongoing situation of COVID-19 , it has been preponed and my semester exam will be finished by the first week of May.
I have received PPO from Honeywell and the joining date will be mid of September.
So, I have no other commitments this summer, thereby I will be able to give 40hrs or more per week. I am ready to commit extra time if needed in order to finish the goals of the project.

What excites me about the project ?
The project revolves around testing wikipedia Preview. The best part about Testing is to think beyond the boundaries and look for the limitations and critical points. This analytical thinking towards the project excites me the most. The Project offers me a great learning experience and an open source exposure. It will be a great opportunity for me to work under such qualified mentors and contribute to a big Organisation, Wikipedia Foundation

Why should I be selected for the project?

  • I have already gone through the codebase of Wikipedia-Preview. Since I have worked previously on various projects based on javascript, I have a good hold of it and therefore can deliver the task more efficiently..
  • I had worked on the automation pipeline. Also wrote, run and debugged test cases on the application. I surely will fit into the project requirements.
  • I secured numerous Case Competition and Coding Challenges which will benefit me in analyzing the critical test cases
  • I am quite punctual and dedicated towards the work allotted to me. I can assure you that I can deliver the given work in a stipulated time.

What does making this project happen mean to you?

  • WIkipedia Foundation has been working since 2003, it has published a large amount of content and made it available to the user.
  • WIkipedia has attracted a huge user base who lookout for content on the internet.
  • Testing forms an important part of any project. Through the completion of this project, the bugs and the fallback condition can be fixed. This will prevent the glitches to the users and ultimately, will enhance the user's experience.
  • It will be a great opportunity for me to be part of this project as it will impact a huge user base and will improve their experience.

Past Experience

  • Last Summer 2020, I did my summer internship at Honeywell Inc. where I
    • Created a Custom Window Python Container in Docker for building .PYD files and is integrated in the Honeywell CI/CD Automation Pipelines.
    • Designed a Platform using Reactjs, .NET core, MS-SQL. Authenticated it using JWT token and containerized each component.
    • Deployed Kong API Gateway over the application and enabled load balancing and security plugins for secured customers access.
  • Later in 2019, I worked at Abhibus Pvt Ltd. where I
    • Generated the routes of various transportation Services by scrapping the websites using Selenium and Beautiful Soup.
    • Created a Backend architecture of different routes of bus and train circulating in Hyderabad using Neo4j database technology.
    • Designed a UI framework using Reactjs to provide the customers with different routes and stoppages between two stations/locations.
  • I was a visiting research intern at University of Malaya, Malaysia(QS-59) and worked on a Machine Learning Project.
  • Finalist at Razorpay FTX Hackathon
  • Finalist at Hult Prize Regional Summit Bangkok
  • Finalist at Solvay’s Business Game, Belgium 2020.
  • During my college tenure, I have been part of a web team where I had led and worked on building dynamic websites for the college fest using reactjs.: Link1, Link2(*Most of them are private repository as they are hosted on IIT KGP server so cannot share in the proposal)

Contribution to Wikipedia

I have contributed to Wikipedia Dashboard and have solved an issue related to i18 Translation. My PR had been merged (link). This will help me in localization testing in this project.

Microtasks (Completed)

Task 1: Completed
Test cases have been added for the following:

  • Page test: This includes the testing of the content of index page, article page, and URL testing (checks the url of each article in the index page with respect to the language used).
  • Preview test: This includes the testing of
    • preview-testing: check all the elements present in the preview.
    • preview popup testing: A Single File Testing all the previews in different articles. It also checks the header image if it is present. It further checks the gallery section if present and checks all the images.
    • preview mobile: A Single File Testing all the previews in the different viewport. Checking all the images and gallery sections.
    • Localisation Testing: Testing the element showing different languages in preview by using i18 Translation.

Further, the success of all the test cases is shown in the CircleCI integrated PR.

Task 2: Completed
I have refactored the code for CircleCI Integration. I have inspected the files in the CircleCI dashboard.

Event Timeline

GSoC application deadline has passed. If you have submitted a proposal on the GSoC program website, please visit and then drag your own proposal from the "Backlog" to the "Proposals Submitted" column on the Phabricator workboard. You can continue making changes to this ticket on Phabricator and have discussions with mentors and community members about the project. But, remember that the decision will not be based on the work you did after but during and before the application period. Note: If you have not contacted your mentor(s) before the deadline and have not contributed a code patch before the application deadline, you are unfortunately not eligible. Thank you!

Is everything in this project task planned for Google-Summer-of-Code (2021) completed? If yes, please consider closing this task as resolved. If bits and pieces are remaining, you could consider creating a new task and moving them there.

Hello! GSoC is long over. Anything leftover in this task before it can be resolved?