Skip to content

feat(posts): add blog post to expose the architecture of our web homologation stack#480

Merged
maba2606 merged 14 commits into
masterfrom
web-frontend-homologation
Feb 6, 2026
Merged

feat(posts): add blog post to expose the architecture of our web homologation stack#480
maba2606 merged 14 commits into
masterfrom
web-frontend-homologation

Conversation

@maba2606

@maba2606 maba2606 commented Dec 17, 2025

Copy link
Copy Markdown
Contributor

🎭 First QA blog post about our homologation stack

@maba2606 maba2606 added WIP and removed Size/M labels Dec 17, 2025
@aws-amplify-eu-west-3

Copy link
Copy Markdown

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-480.dsvmt7xpjktgx.amplifyapp.com

@fdubost fdubost left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

First QA blog post 💪

title: "Building a Scalable, Multi-Tenant Homologation Stack at Bedrock Streaming"
description: "We share here QA context,key takeaways and architecture decisions and reveal the architecture of the Web homologation stack."
tags: [frontend, playwright, qa, web]
author: [m_bayard]

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

---
layout: post
title: "Building a Scalable, Multi-Tenant Homologation Stack at Bedrock Streaming"
description: "We share here QA context,key takeaways and architecture decisions and reveal the architecture of the Web homologation stack."

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
description: "We share here QA context,key takeaways and architecture decisions and reveal the architecture of the Web homologation stack."
description: "We share here QA context, key takeaways and reveal the architecture of the Web homologation stack."

description: "We share here QA context,key takeaways and architecture decisions and reveal the architecture of the Web homologation stack."
tags: [frontend, playwright, qa, web]
author: [m_bayard]
cover: /assets/images/

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not needed, to be removed 🗑️

Comment on lines +10 to +11
feature-img: "/images/posts/"
thumbnail: "/images/posts/"

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing artifacts 🕳️

Comment on lines +18 to +20
QA engineers are therefore a critical resource responsible for assessing product quality and ensuring high standards through continuous validation and homologation\*.

\*For clarity, homologation specifically involves the rigorous, final assessment of a release candidate (RC). This process entails fully testing the RC across a matrix of multi-client configurations (customer-specific data/settings) and multi-browser environments on an iso-production environment before deployment.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would remove the *, which I think disrupts the reading

Suggested change
QA engineers are therefore a critical resource responsible for assessing product quality and ensuring high standards through continuous validation and homologation\*.
\*For clarity, homologation specifically involves the rigorous, final assessment of a release candidate (RC). This process entails fully testing the RC across a matrix of multi-client configurations (customer-specific data/settings) and multi-browser environments on an iso-production environment before deployment.
QA engineers are therefore a critical resource responsible for assessing product quality and ensuring high standards through continuous validation and _homologation_.
In your context, _homologation_ specifically involves the rigorous, final assessment of a release candidate (RC). This process entails fully testing the RC across a matrix of multi-client configurations (customer-specific data/settings) and multi-browser environments on an iso-production environment before deployment.

│ ├── interactivity.steps.ts
│ ├── visibility.steps.ts
│ │── ...
│ └── utils/ # Utility functions for steps (getValue() for multi-tenant config)

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Speaking about getValue() function at this step can be confusing as we doesn't know what's its purpose

Comment on lines +115 to +118
│ ├── m6web/ # M6+ specific config
│ ├── .../
│ ├── .../
│ └── clientN/ # client N specific config

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't include real customer code

Suggested change
│ ├── m6web/ # M6+ specific config
│ ├── .../
│ ├── .../
│ └── clientN/ # client N specific config
│ ├── .../
│ ├── .../
│ └── clientN/ # client N specific config

│ └── translations.config.ts
```

## 🔄 Data Flow Example: Multi-Tenant Magic

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

More a sub part of the architecture

Suggested change
## 🔄 Data Flow Example: Multi-Tenant Magic
### 🔄 Data Flow Example: Multi-Tenant Magic


Step receives the abstract key `"translation.account.menu.logout"`.

Step calls `getValue("translation.account.menu.logout")`.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Step calls `getValue("translation.account.menu.logout")`.
Step calls a utils function `getValue("translation.account.menu.logout")`.

Comment on lines +161 to +165
**What's next:**

More AI and bring the automated testing to the age of agentic.

Merge the testing approach with our developers.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
**What's next:**
More AI and bring the automated testing to the age of agentic.
Merge the testing approach with our developers.
**What's next:**
- More AI and bring the automated testing to the age of agentic.
- Merge the testing approach with our developers.

@@ -0,0 +1,167 @@
---
layout: post
title: "Building a Scalable, Multi-Tenant Homologation Stack at Bedrock Streaming"

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I fear that "Homologation" is not well understood (admittedly it is defined further on, but it can be confusing here). What do you think about :
"Building a Scalable, Multi-Tenant QA Automation Stack at Bedrock Streaming"
It emphasizes that the post focuses on QA teams and automation.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes that makes sense for the title of the blog post 💯

| [Playwright](https://playwright.dev/) | Browser Automation Engine | Speed and Reliability: Unified API for all major browsers (Chromium, Firefox, WebKit), mobile emulation, and excellent DX. |
| [playwright-bdd](https://vitalets.github.io/playwright-bdd/#/) | BDD Framework (Gherkin) | Collaboration and Readability: Enables tests to be written in a natural, shared language while managing Playwright test generation. |

Note: our dictionary of steps is greatly inspired by [uuv](https://github.com/Orange-OpenSource/uuv) which aims to provides an ecosystem that simplifies the writing of End-to-End tests in a BDD approach and a user-centric way and accessibility-first selectors.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To have a more dynamic layout like
Screenshot 2025-12-18 at 16 36 12

Suggested change
Note: our dictionary of steps is greatly inspired by [uuv](https://github.com/Orange-OpenSource/uuv) which aims to provides an ecosystem that simplifies the writing of End-to-End tests in a BDD approach and a user-centric way and accessibility-first selectors.
> ℹ️ Note: our dictionary of steps is greatly inspired by [uuv](https://github.com/Orange-OpenSource/uuv) which aims to provides an ecosystem that simplifies the writing of End-to-End tests in a BDD approach and a user-centric way and accessibility-first selectors.

Comment on lines +88 to +102
**1. Feature Files (BDD Layer)**
Path: `features/@desktop/` & `features/@webview/`
Categorized by domain: `@core` (navigation), `@player` (VOD/Live), and `@ulc` (account/payment).

**2. Step Definitions (Glue Layer)**
Path: `features/steps/\*.steps.ts`
Standardized user actions (When) and assertions (Then) such as visibility.steps.ts or authentification.steps.ts.

**3. Utilities (Implementation Layer)**
Path: `features/steps/utils/\*.utils.ts`
The "brains" of the operation, including config.utils.ts for multi-tenant data retrieval and player.utils.ts for video interactions.

**4. Configuration (Multi-Tenant Layer)**
Path: `config/{customer}/`
Where the magic happens. This layer stores customer-specific account.config.ts, translations.config.ts, and environment URLs.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Layout still not OK
Screenshot 2025-12-18 at 16 37 45

Try this:

Suggested change
**1. Feature Files (BDD Layer)**
Path: `features/@desktop/` & `features/@webview/`
Categorized by domain: `@core` (navigation), `@player` (VOD/Live), and `@ulc` (account/payment).
**2. Step Definitions (Glue Layer)**
Path: `features/steps/\*.steps.ts`
Standardized user actions (When) and assertions (Then) such as visibility.steps.ts or authentification.steps.ts.
**3. Utilities (Implementation Layer)**
Path: `features/steps/utils/\*.utils.ts`
The "brains" of the operation, including config.utils.ts for multi-tenant data retrieval and player.utils.ts for video interactions.
**4. Configuration (Multi-Tenant Layer)**
Path: `config/{customer}/`
Where the magic happens. This layer stores customer-specific account.config.ts, translations.config.ts, and environment URLs.
**1. Feature Files (BDD Layer)**
Path: `features/@desktop/` & `features/@webview/`
Categorized by domain: `@core` (navigation), `@player` (VOD/Live), and `@ulc` (account/payment).
**2. Step Definitions (Glue Layer)**
Path: `features/steps/\*.steps.ts`
Standardized user actions (When) and assertions (Then) such as visibility.steps.ts or authentification.steps.ts.
**3. Utilities (Implementation Layer)**
Path: `features/steps/utils/\*.utils.ts`
The "brains" of the operation, including config.utils.ts for multi-tenant data retrieval and player.utils.ts for video interactions.
**4. Configuration (Multi-Tenant Layer)**
Path: `config/{customer}/`
Where the magic happens. This layer stores customer-specific account.config.ts, translations.config.ts, and environment URLs.


**3. Utilities (Implementation Layer)**
Path: `features/steps/utils/\*.utils.ts`
The "brains" of the operation, including config.utils.ts for multi-tenant data retrieval and player.utils.ts for video interactions.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think it's relevant to mention the filename config.utils.ts and player.utils.ts which can be quite confusing for the reader. I suggest:

Suggested change
The "brains" of the operation, including config.utils.ts for multi-tenant data retrieval and player.utils.ts for video interactions.
The "brains" of the operation, including some functions for multi-tenant data retrieval and video interactions.


**Requirements and rationale behind**

- Natural Language BDD (Gherkin): This is a key enabler for collaboration.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For dynamic reading:

Suggested change
- Natural Language BDD (Gherkin): This is a key enabler for collaboration.
- **Natural Language BDD (Gherkin)**: This is a key enabler for collaboration.


- Easy Review: Allows QA Engineers, Product Owners (POs), and Developers (DEVs) to easily read, review, and contribute to the test specifications without needing deep coding knowledge.

- Multi-Client / Multi-Platform Support: Leveraging Playwright's power, our stack should inherently supports validation across:

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- Multi-Client / Multi-Platform Support: Leveraging Playwright's power, our stack should inherently supports validation across:
- **Multi-Client / Multi-Platform Support**: Leveraging Playwright's power, our stack should inherently supports validation across:

- Multiple Platforms (desktop and mobile browsers).
- Multiple apps / projects.

- Codebase Integration (the shift): The homologation application is part of the main Web codebase.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- Codebase Integration (the shift): The homologation application is part of the main Web codebase.
- **Codebase Integration (the shift)**: The homologation application is part of the main Web codebase.

Comment on lines +135 to +141
Step receives the abstract key `"translation.account.menu.logout"`.

Step calls a utils fonction `getValue("translation.account.menu.logout")`.

Config resolves to the specific customer's value (e.g., `"Kijelentkezés"` for one customer, `"Logout"` for another).

Playwright locates the element with that specific text and validates visibility.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe more readable:

Suggested change
Step receives the abstract key `"translation.account.menu.logout"`.
Step calls a utils fonction `getValue("translation.account.menu.logout")`.
Config resolves to the specific customer's value (e.g., `"Kijelentkezés"` for one customer, `"Logout"` for another).
Playwright locates the element with that specific text and validates visibility.
- Step receives the abstract key `"translation.account.menu.logout"`.
- Step calls a utils fonction `getValue("translation.account.menu.logout")`.
- Config resolves to the specific customer's value (e.g., `"Kijelentkezés"` for one customer, `"Logout"` for another).
- Playwright locates the element with that specific text and validates visibility.

Comment on lines +145 to +147
- AI and BDD: The structured, human-readable format of Gherkin makes it an ideal input for future AI agents.
- CI/CD In Action: Automated tests are integrated into our CI pipeline, ensuring quality gates are enforced before any release proceeds.
- The Human Factor: We’ve transformed the QA role. By transitioning to "Quality Architects," our engineers now own the automated patrimony, supported by targeted training to bridge the gap between manual testing and code.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- AI and BDD: The structured, human-readable format of Gherkin makes it an ideal input for future AI agents.
- CI/CD In Action: Automated tests are integrated into our CI pipeline, ensuring quality gates are enforced before any release proceeds.
- The Human Factor: We’ve transformed the QA role. By transitioning to "Quality Architects," our engineers now own the automated patrimony, supported by targeted training to bridge the gap between manual testing and code.
- **AI and BDD**: The structured, human-readable format of Gherkin makes it an ideal input for future AI agents.
- **CI/CD In Action**: Automated tests are integrated into our CI pipeline, ensuring quality gates are enforced before any release proceeds.
- **The Human Factor**: We’ve transformed the QA role. By transitioning to "Quality Architects," our engineers now own the automated patrimony, supported by targeted training to bridge the gap between manual testing and code.


- More AI and bring the automated testing to the age of agentic.

- Merge the testing approach with our developers.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- Merge the testing approach with our developers.
- Align the testing approach with our developers, who already have an automated E2E testing stack for Pull Request validation (currently based on [WebdriverIO & CucumberJS](https://tech.bedrockstreaming.com/2021/09/06/web-best-practices.html#our-e2e-tests)).

@maba2606 maba2606 requested a review from fdubost February 2, 2026 15:25
Comment thread _posts/2026-02-02-web-homologation-as-app.md Outdated

@MrPasstek MrPasstek left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks good

@bidbouraissexternal bidbouraissexternal left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Validation OK

@valentincam valentincam left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👏👏👏

@maba2606 maba2606 merged commit ad4539d into master Feb 6, 2026
3 checks passed
@maba2606 maba2606 deleted the web-frontend-homologation branch February 6, 2026 08:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants