---
<!-- C'est l'histoire d'un incident -->
[ticket](https://www.wrike.com/open.htm?id=880062212)
---
```
datalayer.push(
{
"event":"purchase",
"ecommerce":{
"transaction_id":"SLMP040445134",
"value":" 325.00",
"shipping":"99.00",
"tax":"78.84",
"currency":"EUR",
"coupon":"2 mois d'abonnement offerts",
"items":[
{
"item_name":"Tout inclus",
"price":"49.00",
"item_category":"Offre",
"quantity":"1"
},
{
"item_name":"Boîte(s) à clés",
"price":"325.00",
"item_category":"Matériel",
"quantity":"1"
}
]
},
"gtm.uniqueEventId":1
}
)
```
---
## Contexte
- code vieux comme Mathusalem (pas de panther)
- spaghetti code => difficile à tester (unitaire, integration)
---
## Etat de l'art Symfony
- MaSuperLibDeTest + Selenium
- [symfony/panther](https://github.com/symfony/panther)
---
## test de non-regression: datalayer
- Js "avancé" (VueJS - ShadowDOM)
- parcours interrompu par envoi de lien par mail pour poursuivre le parcours
- Paiement en iframe
- comment evaluer du JS ?
---
## Playwright
* by Microsoft
* test très simple à écrire en Javascript (assert with jest)
* auto waiting :fire:
* fine tuning du contexte (browsers, android/ios, devices,slow connection, htaccess handling)
* plugins (screenshot, video recording, test de regression visuelle)
* tooling complet: CodeGen, Debug Mode, Inspector, Trace viewer
---
## Demo
npx playwright codegen
---
---
<!-- non headless, debug mode, code rec, timeout, REMOTE à la lephare/ansible, slow-mo, hack lien reçu par mail caché dans le DOM pour ouvrir dans nouvel onglet -->
---
## Automatiser le test
- headless en CI
- REMOTE comme nous l'utilisons pour lephare/ansible deploy.yml
---
## Monter un environnement de testing "iso-prod"
- complexe: services bdd, elasticsearch, redis etc ...
- fixtures: maintenance importante, jamais les vraies données, cas possible
- trop long à monter en CI
---
## Ne pas monter un environnement de testing
<!-- finalement on parle d'une preprod, dont nous disposons déjà donc autant l'utiliser -->
<!-- on test en preprod, après avoir déployé -->
<!-- attention aux connexions avec WS tiers -->
<!-- ok avec cela car finalement on automatise ce que fait un PO en recette -->
---
---
## References
* https://github.com/microsoft/playwright
* [exemple de test](https://gitlab.lephare.io/projets/imaprotect/espace-public/-/blob/develop/tests/e2e/datalayer_souscription.spec.js)
* MR de Nathan
{"metaMigratedAt":"2023-06-17T02:25:32.304Z","metaMigratedFrom":"YAML","title":"Test E2E avec Playwright","breaks":true,"description":"View the slide with \"Slide Mode\".","contributors":"[{\"id\":\"90d1cbfc-f7d6-4f9c-b2eb-42d2c1e2f52f\",\"add\":4588,\"del\":3943}]"}