Use url path for snapshot src attribute

[stephanie56]

Issue:

Problem

When running Cypress with Chromatic on Windows machines, the sourceMap object was storing Windows file system paths (containing backslashes) as values, which were then used to update the src attributes in the DOM snapshots.

While the Windows file system path may work for an image url (browser normalize it automatically), but urls used in CSS properties could be broken and caused resource not found since backslashes are used for css escape. For example, this code:

.btn {background: url('assets\images\icon.png')}

can be interpreted as this:

.btn {background-image: url('assetsmagescon.png')}

What this PR does

Separate the concerns of file system operations and URL generation:

• Continue using the original fileSystemPath for writing files to archive
• Convert backslashes to forward slashes before storing in sourceMap for URL replacement.

How to test

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 95.65%. Comparing base (87c85ab) to head (7e700d8).

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #270      +/-   ##
==========================================
+ Coverage   95.64%   95.65%   +0.01%     
==========================================
  Files          14       14              
  Lines         390      391       +1     
  Branches       67       66       -1     
==========================================
+ Hits          373      374       +1     
  Misses         17       17              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[tevanoff]

fileSystemPath will always be normalized with forward-slashes because it's created from a URL:

chromatic-e2e/packages/shared/src/write-archive/archive-file.ts

Line 45 in 87c85ab

this.url = new URL(url);

> new URL('https://chromatic.com/a/b/c\\d\\e\\f').pathname
'/a/b/c/d/e/f'

[stephanie56]

@tevanoff that's right, fileSystemPath is created by the new URL(url), but later in the pipeline it's broken down into parts and rejoined again here this.truncateFileName(sanitizedSrc).

    let sanitizedSrc = this.url.pathname; // <- starting point
    sanitizedSrc = this.preserveExternalDomain();
    sanitizedSrc = this.ensureNonDirectory(sanitizedSrc);
    sanitizedSrc = this.encodeQueryString(sanitizedSrc);
    sanitizedSrc = this.truncateFileName(sanitizedSrc); // <- transformed to platform specific path
    sanitizedSrc = this.removeSpecialChars(sanitizedSrc);
    sanitizedSrc = this.renameReservedPathnames(sanitizedSrc);
    sanitizedSrc = this.addExtension(sanitizedSrc);

The path parts are joined again using path.join(), this method joins all given path segments together using the platform-specific separator as a delimiter. So if the user is running e2e on a windows machine, then path.join() return a windows specific path?