You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When running Cypress CT on an Angular project where assets are copied from a directory structure other than <project-root>/src/assets to /assets (probably when the number of path segments is different between source and destination), the assets can't be resolved from stylesheets. Serving the application works correctly.
When running Cypress CT (ng run <project>:ct), the image is not displayed and an error is printed in the terminal:
ERROR in ./src/app/app.component.scss?ngResource
Module Error (from ./node_modules/.pnpm/postcss-loader@8.1.1_postcss@8.4.35_typescript@5.4.5_webpack@5.90.3/node_modules/postcss-loader/dist/cjs.js):
/Users/leosvel/code/playground/ng-cypress-ct-issue/src/app/app.component.scss:4:2: Can't resolve '../assets/logo.svg' in '/Users/leosvel/code/playground/ng-cypress-ct-issue/src/app'
Desired behavior
Running Cypress CT on an Angular project should work correctly and resolve assets regardless of their directory structure as long as their configuration is correct and they work when serving the application.
Even when using a standard src/assets directory, there's an extra small issue with the <img> tag. If the provided path has a leading / the image is not resolved correctly, and there's a 404 error in the network tab. If there's no leading / it works correctly. That is the opposite of what it works for using url() from the stylesheet. In that case, the asset must have a leading /.
Below are the Cypress dev server logs for the requests in the application:
GET /assets/logo.svg 404 5.606 ms - -
GET /__cypress/src/assets/logo.svg 200 5.000 ms - -
GET /__cypress/src/logo.svg 200 7.885 ms - -
GET /__cypress/src/OpenSans-Regular.ttf 200 5.762 ms - -
The first corresponds to the <img> tag with a src of /assets/logo.svg
The second corresponds to the <img> tag with a src of assets/logo.svg
The third and fourth are the ones loaded from the stylesheet (both use a leading /, otherwise they throw)
This is not a major issue. I don't think it's blocking anyone. The <img> tag source can be set to paths without a leading / as a workaround. It's inconsistent with how the paths need to be set in the stylesheets, and it might be inconvenient if folks have to change their project's source code to accommodate Cypress CT, though.
Note that the Angular application is correctly served with either path.
I updated the shared repo to showcase this as well. The branch https://github.com/leosvelperez/ng-cypress-ct-issue/tree/standard-assets-dir has the standard src/assets directory where it can be seen the stylesheets resolving the assets correctly, but the <img> tag with the leading / (the same path used in the stylesheets) doesn't work.
Current behavior
When running Cypress CT on an Angular project where assets are copied from a directory structure other than
<project-root>/src/assets
to/assets
(probably when the number of path segments is different between source and destination), the assets can't be resolved from stylesheets. Serving the application works correctly.When running Cypress CT (
ng run <project>:ct
), the image is not displayed and an error is printed in the terminal:Desired behavior
Running Cypress CT on an Angular project should work correctly and resolve assets regardless of their directory structure as long as their configuration is correct and they work when serving the application.
Test code to reproduce
Repo: https://github.com/leosvelperez/ng-cypress-ct-issue
Reproduction steps:
Cypress Version
13.8.1
Node version
v20.12.0
Operating System
macOS 14.4.1
Debug Logs
No response
Other
No response
The text was updated successfully, but these errors were encountered: