Why does my angular app has an empty root object in the jenkinspipeline?

I have an Angular-App which I would like to test with webdriverio in our Jenkins-Pipeline. I configured wdio to run some test. At the moment, those are pritty simple: open up the app and click on a button.

Starting the app with the backend on my machine and running the wdio tests with the commands as in the Jenkinsfile it runs runs the tests fine.

In the Jenkinspipleine the tests are failing with the reason "element wasn't found". For debugging reasons I printed the URL and the body of the page in one of the tests to see where is the test and what does it see.

The URL looks fine but the html of the app is like the following:

<html lang="en">
<head>
<meta charset="utf-8" />
<title>MyApp</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="favicon.png" id="favicon" rel="icon" type="image/x-icon" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<myapp-root></myapp-root>
<script src="runtime.js" type="module"></script>
<script src="polyfills.js" type="module"></script>
<script src="styles.js"></script>
<script src="vendor.js" type="module"></script>
<script src="main.js" type="module"></script>
</body>
</html>


Anyone has an idea why the body is empty in the test run?

Angular version:17 Chrome/Chromedriver version:93 Node version: 18

Continue reading...