codykaup
commented
1 month ago That error looks like it's coming from the viewport parser. How are you configuring your viewports?
Closed rambod-rahmani closed 1 month ago
codykaup
commented
1 month ago That error looks like it's coming from the viewport parser. How are you configuring your viewports?
rambod-rahmani
commented
1 month ago Hello @codykaup ,
here is the story with the viewport configuration:
import { Meta, StoryFn } from "@storybook/vue3";
import LocatorTest from "./LocatorTest.vue";
export default {
title: "Components/LocatorTest",
component: LocatorTest,
parameters: {
chromatic: { viewports: [320, 1200] },
},
} as Meta<typeof LocatorTest>;
const Template: StoryFn<typeof LocatorTest> = (args) => ({
components: { LocatorTest },
setup() {
return { args };
},
template: '<LocatorTest v-bind="args" />',
});
export const Default = Template.bind({});
Default.args = {};for my sample Vue component
sample Vue Component
<template>
<div class="locator-test">
<h1 class="header" id="main-title">Locator Test Page</h1>
<div class="form-group">
<label for="username">Username:</label>
<input type="text" id="username" placeholder="Enter username" class="form-input" />
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" placeholder="Enter password" class="form-input" />
</div>
<div class="button-group">
<button id="submit-button" class="primary-button">Submit</button>
<button id="cancel-button" class="secondary-button">Cancel</button>
</div>
<p class="info-text">Test your CSS and XPath locators on this page.</p>
<ul class="item-list">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
</ul>
</div>
</template>
<script>
export default {
name: "LocatorTest",
};
</script>
<style scoped>
.locator-test {
padding: 20px;
background-color: #f5f5f5;
max-width: 400px;
margin: 0 auto;
}
.header {
color: #333;
margin-bottom: 20px;
}
.form-group {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.form-group label {
margin-right: 10px;
min-width: 80px;
}
.form-input {
padding: 10px;
width: 100%;
max-width: 300px;
}
.button-group {
margin-top: 20px;
display: flex;
justify-content: center;
/* Center the buttons */
}
.primary-button {
background-color: #42b983;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
margin-right: 10px;
}
.secondary-button {
background-color: #e0e0e0;
color: #333;
padding: 10px 20px;
border: none;
cursor: pointer;
}
.info-text {
margin-top: 30px;
color: #666;
}
.item-list {
list-style-type: none;
padding: 0;
}
.item {
padding: 10px;
background-color: #fff;
margin-bottom: 10px;
border: 1px solid #ddd;
}
</style>That all looks like Storybook to me so you shouldn't need --cypress there! The --cypress flag should be trying to read Cypress tests which parses viewports like these examples: https://docs.cypress.io/api/commands/viewport
Is the repo public so I can take a look? I'd love a reproduction environment to see if it's a bug on our end!
rambod-rahmani
commented
1 month ago Hello @codykaup , I made the repository public for you: https://github.com/Aladia-Frontend/cypress-test
I managed to fix the issue, I guess the problem was outdated libraries perhaps? You can go back to this commit if you want a reproduction environment though: https://github.com/Aladia-Frontend/cypress-test/pull/1/commits/4362f4408aba36456903a4a6a675250c559d3b7b
Anyway, now I ma facing the following issue that you might be able to help me with. I configured my project to perform visual regression tests using stories as well as Cypress E2E tests. Is that possible? You fill find two github workflows to this end:
npx chromatic)npx chromatic --cypress)The problema I am facing is that on Chromatic I can only review the latest build for any given project. Also given that the builds run consecutively, everytime all tests are detected as unviewed.
So for example in the following screenshot, in build 205 I accepted all changes. Then I pushed a change and all my tests are marked as changed in build 206 (storybook-regression-tests.yml) and 207 (e2e-regression-tests.yml)
codykaup
commented
1 month ago Thanks @rambod-rahmani!
Perhaps I'm missing something but I don't see any Cypress tests in that repo. Regardless, I'm glad you got it working!
I configured my project to perform visual regression tests using stories as well as Cypress E2E tests. Is that possible?
I would recommend creating a separate project in Chromatic for your E2E tests then using each project for their intended target
FYI they'll have different project tokens so you'll have to set up the right one in CI when you're running the build!
Another suggestion regarding Cypress.
I'm sure you have a good reason for going that route but I wanted to point out that Storybook also has interaction testing which can cover a pretty good amount of what Cypress would offer with much less complexity (since you're already using Storybook). It even integrates directly into Chromatic so the regression test fails if the interaction test fails.
It's your call on how you want to set things up, just wanted to make you aware!
rambod-rahmani
commented
1 month ago Thank you very much @codykaup ! All your suggestions were We can close this if it is ok with you.
codykaup
commented
1 month ago Sounds good @rambod-rahmani, glad to help out! Let us know if you run into any other issues!
Bug report
Issue Description:
I'm integrating Chromatic with Cypress for end-to-end testing on a sample Vue.js project. The Storybook builds and Chromatic integration work as expected without Cypress. I'm able to block my PRs via GitHub Actions until changes are reviewed and accepted on Chromatic's web interface. However, when trying to run Cypress tests along with Chromatic using:
and successfully generating
chromatic-archives, I run into the following error while executing:Error Logs:
Here are the relevant logs from the command:
I’ve ensured that my
chromatic-archivesfolder is being generated correctly:Without the
--cypressoption, everything works as expected:The Storybook is built and published, and visual changes are reviewed via the Chromatic web interface as usual.
Local Debugging:
I have also followed your suggestion to run the following commands:
The Webpage is blank.
Without Cypress integration everything works fine
Additional Notes:
.storybook/main.tsbuild-storybook.log package.json tsconfig.json