Add code examples to Page Component Objects (EN)

[kathyrollo]

This PR adds much needed code examples to the Page Component Object section for the English translation.

Description

Relevant code is written in Java to complement the Page Object section, which also includes HTML structure, page object, page component object, and test methods to illustrate usage.

There are additional text written apart from the code. As the contributor is not a native of the other translations, the contribution is first made to the most used translation of the documentation.

Motivation and Context

• While page components have been the intention of the Page Object Model from the start, it became lost in translation due to naming as noted by Martin Fowler in 2013.
• No examples exist for "panel objects" (as M.F. first coined it), later known as "page components", on reputable or official sources for years.
• No examples exist using JDK8+ features such as streams and lambdas, which make pages and components much simpler in implementation to complement Selenium 4.x.

Types of changes

• Change to the site (I have double-checked the Netlify deployment, and my changes look good)
• Code example added (and I also added the example to all translated languages)
• Improved translation
• Added new translation (and I also added a notice to each document missing translation)

Checklist

• I have read the contributing document.
• I have used hugo to render the site/docs locally and I am sure it works.

[netlify]

✅ Deploy Preview for selenium-dev ready!

Name	Link
🔨 Latest commit	97fa333
🔍 Latest deploy log	https://app.netlify.com/sites/selenium-dev/deploys/646616673f4cc4000824ce9a
😎 Deploy Preview	https://deploy-preview-1387--selenium-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[diemol]

Thank you for this PR!

Seems the other page_object_models.*.md are completely out of sync regarding the translation, could you please replace the content completely on that page?

Thanks!

[kathyrollo]

Dear @diemol ,

Thank you for your review. 😄

I can add the code part, but unfortunately cannot translate the English text I added in between the paragraphs of the section. Google translate may have undesired results as I don't speak ja/pt-br/zh-cn and they also have native characters. 😅

Would you be happy for me to just put the code examples at the bottom of each non-English page?

[diemol]

You do not need to translate, I meant to replace the whole content page with the English version as somehow they are not reflecting the same content.

[kathyrollo]

Hi @diemol , sorry a bit lost. 😅

Are you saying the English translation is not reflecting the changes? So far, I can only view the changes in netlify - https://deploy-preview-1387--selenium-dev.netlify.app/documentation/test_practices/encouraged/page_object_models/

[diemol]

No, no.

The idea is to have the same content from the page in English on the other pages. Which means, copy the content you have in English, and replace the whole content in the other languages. Because, over time, it seems we forgot to update the other languages and the English content evolved on its own.

[kathyrollo]

Hi @diemol , from what I'm reading, it looks like we want to change all the other pages to English. If not, would you be able to provide an example for say page_object_models.ja.md? Happy to do the rest. 😄

[diemol]

Yes, all pages to English. Thanks.

[kathyrollo]

Hi @diemol , I've copied the English content to the other pages as requested. Kept the titles native. Let me know if that suffices. Thanks!

[diemol]

Thank you!