As PO, for a personal challenge, writing a E2E suite for websites and for mobile apps with Cypress and Chat GPT turned me as a Prompt Engineer
The experience, related in this post, was a challenge launched to me, born from both personal and professional factors:
1. From a personal point of view:
Following the writing of the book “Learning and Building E2E test automation with Cypress & OKR” which expanded my understanding of the OKRs method and at the same time reinforced my Cypress testing framework’s understading and for like any one working in the digital industry… The ChatGPT-induced disruption to the landscape of my purring working routine!
So, I decided to apply the method explained in the book with the help of ChatGPT under a harsh time constraint in order to measure ChatGPT’s gross help given. Intuitively, my feeling was that what has taken me months should only at least take weeks, solely in duo with AI.
Learning and Building E2E test automation with Cypress & OKR
- The book is available for sale on Amazon: https://www.amazon.com/dp/B0BP216HCW/
- The code is available at https://github.com/bflaven/book-learning-and-building-e2e-test-automation-with-cypress-and-okr
The code is here too on my personal github account
With the help of ChatGPT, I have given me one month to create from scratch a E2E suite for all the websites for FMM. Then, I decide to cope with the mobile applications, mostly working on a JSON API centric validation as mobile application are receiving JSON files to populate data inside and use a meta file in JSON named “skeleton” that structure all the mobile applications… and I decide to allow me one week only for this suite.
The idea was simple if I had to face any issue, I will ask ChatGPT both for coding, logic, advice, best practices… etc. I will be like the hero of the novel “The Dice Man”. Book that tells the story of a psychiatrist who makes daily decisions based on the casting of a diсe! I have replaced the dice by the AI.
2. From a professional point of view:
Here is the more detailed version for the scope for each suite:
The objective was double:
- Writing down a first version of a robust E2E suite for all the FMM group’s websites, with Cypress, that enable both Javascript and Gherkin testing. The time limit was fixed at one month.
- Writing down a first version of a robust E2E suite for all the FMM group’s mobile applications, with Cypress, that enable both Javascript and Gherkin testing. The time limit was fixed at one week.
Well, OK… It was not only an egoistic personal challenge, it was also more managerial, more team-building oriented!
Indeed, the initial motivation was to feed a logic of sharing best practices on testing and quality. Concretely, as only actions carry values*, it matters to initiate really the creation of several test suites under Cypress for the team in charge of websites or mobile applications. Consequently, it may consolidate the culture of quality for all.
But, here again, the contribution’s effect of the E2E suite must be measured. The creation of these test suites must have tangible consequences: first of all, by increasing the speed of delivery of applications, i.e. several releases per week, while maintaining a high quality level, i.e. no major regressions for each release, so no hot-fixes and then most important no support.
* It is also called “Congruence” which means to have your values and actions aligned.
E2E Suite Contest for Websites
The team practically writes, on each of their Jira tickets, almost real Gherkin scripts as an acceptance test that specify the DOD. The challenge was to transform each proto test to effective Gherkin test! So, POs can write their own tests. The suite was supposed to allow management of any combinaison of brand/language. The suite must be resilient to any test combination both in JS (*.cy.js) and in Gherkin (*.feature). The Gherkin should allow to quickly transpose tests written using the Cypress Studio.
So, here is exactly what has been jotted as rough ideas regarding the E2E suite objectives for websites:
MUST-HAVE
- FUNCTIONNAL: The E2E suite must manage functional priorities e.g. browsing and testing the main navigation.
- OPTIMIZATION: The E2E suite must check pages’ code and structure (meta Open Graph OG) for several and specific purposes e.g. social networks or tracking…etc.
- DEVICES: The E2E suite must ensure that websites are responsive for (mobile, mobile-landscape, tablet, tablet-landscape, desktop).
- SEO: The E2E suite must consider concerns on SEO (meta data optimisation)
- UX/CONTENT: The E2E suite must check the “look and feel” for specific content elements displayed on te websites and validate somehow the webdesign.
NICE-TO-HAVE
More feature on additional SEO and on Screen Capture ability.
- TODO_1: Add a test on the slug when visiting each page to check the slug, validate the SEO and de facto the fov_parameter without postman test.
- TODO_2: Add a capture when visiting each page for a possible visual human check.
E2E Suite Contest for mobile applications
The target for mobile applications was significantly less ambitious. It was simply increasing the ability to test API products, available to mobile applications for consumption. The team would thus be able to distinguish if it is a real mobile application’s bug or a regression related to an API or infrastructure failure.
So, in a nutshell, it’s about testing the existence and validity of JSON inputs called in mobile apps. A review finally quite close to what I formerly did with the help of Newman/Postman. But this time, these tests must be carried out under Cypress in order to standardize testing tools within the teams.
For information, this test experience under Newman/Postman had given rise to the publication of a first book:
A quick journey through API Testing
- The code is available at https://github.com/bflaven/a-quick-journey-through-api-testing
- The book is available for sale on Amazon: https://www.amazon.fr/dp/B07MH81L1X/
The code produced during the contest with the help of ChatGPT
All the code for the contest/experiment is available on my github account
These are mostly working documents but to me, it presents 2 advantages:
- To archive part of searches made with ChatGPT’s help.
- To refine the working method by integrating AI and any additional programming resources that can increase productivity and achievement in obtaining a result, however minimal it may be.
At the same time, I fully understand that these same documents are sometimes present also more than limited interest for any other person than me! One day, this information will be semi-structured or structured using Obsidian but for now on it has this form… due both to some laziness and a lack of time 🙂
You can find the following working directories:
- 001_python_parse_web: how to grab semi-structured data from a website to use in tests.
- 002_package_json_python: handy scripts to generate shortcuts for tedious commands to launch cypress suite with parameters.
- 003_launcher_suite_cypress: a simple applescript to automate the E2E suite launching.
- 004_cypress_fov_suite_2e2: A very extensive directory including a large number of working documents. Those are milestones form the creation process of the E2E suites, in particular the prompts to ChatGPT: javascript class explained, decode encode in javascript, grab explore url in python, parse complex variable in javascript, split class, web scraping in python
The directories 004_cypress_fov_suite_2e2 is splitted up in two directories:
- 004_1_archives_for_code_queries: _depot_code_1.js, _queries_cypress_fov_suite_2e2_2.diff, _queries_cypress_fov_suite_2e2_3.diff
- 004_2_fov_html_js_python: 001_example_print_loop.py, archives, class_explained_chatgpt, decode_encode_javascript, grab_explore_url, parse_complex_var, split_class, web_scraping_python
What was the help from ChatGPT?
Like Marcus Loew, said once: “I make somebody else do it. Let the other fellow go crazy.” That is exactly what I am doing!
1. Delegate the tedious work to ChatGPT (second hand)
ChatGPT has proven to be a patient assistant/developer/teacher/lead-dev, pedagogue and available, in short, a little hand, a little pearl and a good-natured adviser with a kindness and benevolence that becomes almost annoying with obsequiousness.
I shamelessly delegate to him all the thankless tasks, in particular the “Data wrangling” which is always very time-consuming in Data science as in all other disciplines.
A little precision on Data wrangling
Data wrangling is the transformation of raw data into a format that is easier to use. But what exactly does it involve? In this post, we find out.
Source: https://careerfoundry.com/en/blog/data-analytics/data-wrangling/
2. Use all the ChatGPT’s logic and analytical mind of this extra Brain (second brain)
… And for sure, at the same time, I ask ChatGPT pointed and sophisticated questions. As occasional developer, I need a substantial helping hand on code logic or on best practices to adopt. Exactly, like I would do with a senior developer or software architect! Except I do not bother him 🙂
It is therefore definitely a second brain and a second hand*
*Do not get confuse, I use the word “second hand” not as derogatory but really in the literal meaning, more like an “extra hand” that is manipulating things for you!
All this could not be exceptional, the AI’s irruption is just a new change in my way of working! But these directional changes, these pivots, there have been many of them since I started doing digital.
Two questions then:
- What if, as a worker, I refuse to pivot this time… Boo, Fixed Mindset 🙂 I will be laid off soon. Period.
- What if, as a manager, I refuse to use AI? Obviously, I will have to pay a bit for a Q/A, a JS dev, and a PO too. Instead, I can pay a shiva guy, a kind of prompt engineer that will do both three jobs! Interesting? It gives some clue to understand why companies like Google, Meta are so optimistic on AI… It is always sane to wonder who benefits from the crime?
But, for now, let leave a possible political controversy.
In conclusion, for me, the positive thing in using of AI is the ability to ask questions. Getting the correct answer is probably more questionable but on very programmatic concerns, it works! So, as PO, I may disappear and I hope to reinvent myself as little master in “Prompt Art Design” syntax!
More infos
- (essential) ChatGPT by OpenAI!
https://chat.openai.com/chat - (essential) Google Translate
https://translate.google.com/ - Testing mobile, tablet and desktop devices with Cypress
https://maxschmitt.me/posts/cypress-testing-mobile-tablet-desktop - cypress-web-vitals
https://www.npmjs.com/package/cypress-web-vitals - Testing Web Vitals With Cypress
https://dev.to/craigmorten/web-vitals-cypress-testing-3bpj - How to Make Writing Performance Tests Easy With Cypress
https://spin.atomicobject.com/2021/04/21/writing-performance-tests-cypress/ - Node.js Modules: Import and use Functions from Another File
https://www.stanleyulili.com/node/node-modules-import-and-use-functions-from-another-file/ - URL Decode online
https://www.urldecoder.io/ - Viewport in Cypress
https://docs.cypress.io/api/commands/viewport - Class in JavaScript (course)
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Classes