bahmutov / cyclope Goto Github PK

From #5

style.css has (not working version is commented out)

/* CHECKED CARD */

.card .cb-container .cb-input:checked + .check {
  /* background: url("../assets/images/icon-check.svg"),
    linear-gradient(45deg, var(--clr-green), var(--clr-pink)); */
  background: url('../assets/images/icon-check.svg');
  background-color: var(--clr-green);
  background-repeat: no-repeat;
  background-position: center;
}

Need to find such urls, save the images, and update the style tags

url('http://localhost:3777/assets/images/bg-desktop-dark.jpg');

Check if checkbox state is correctly preserved

The problem is visible in https://github.com/bahmutov/test-todomvc-using-keyboard/tree/try-cyclope

The page has the checkboxes green

Cypress DOM snapshots correctly restore the checkbox state

The saved static page does not have the checkboxes set

Not reflected in the saved page

Look at https://github.com/bahmutov/upload-folder-demo/blob/main/zip.js

cannot have ":" characters

Probably just remove the "src" attribute

Need to save them with the HTML

Currently seems to save into the folder but the src attribute has an absolute path?

For resources that do not specify it like //example.com/...

Works on the local page, but not in the image

Seems the CSS is broken in the serialized HTML page/hover-active/index.html since it is not working there

Set them to zero for all elements

For descendant selectors

Should be

But the text was escaped and the > becomes >

Please, separate module exports with the commands inititialisation, so you can import 'cyclope/commands'.

Otherwise, if I want to import anything, it throws an error, as there is no cypress initialized.

Just skip the image generation

Can we query the page for the current element with hover state and recreate it somehow?

In case you have part of resources unavailable (missing image e.g.) the plugin will fail with this error:

This issue has at least 2 negative sides:

• You can't use plugin in your project, sometimes you are not able to fix the bugs on your own, so you have to avoid cyclope at all
• Any bug with 404 error will break the plugin here

A proposal here can be to add some glob pattern ignore list, so if the resource is unavailable, we can simply skip it:

require('cyclope/plugin')(on, config, {
      ignoreFailed: ['assets/**/*.png'],
  });

In case you wan't to ignore all failures:

require('cyclope/plugin')(on, config, {
      ignoreFailed: true,
  });

@bahmutov could you extend the plugin, please?

Thanks in advance 🙇

Seems like it always takes the entire page screenshot

I suspect something is not processing correctly

Should we remove them all? or just remove the onloadedmetadata attribute?

things like <link rel="icon" sizes="192x192" href="//example.com/android-chrome-192x192.png" /> should get HTTPs protocol

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

This repository currently has no open or pending branches.

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

for some images

Need to upgrade dependencies automatically

Seems standard Cypress bundler does not understand

to freeze animations by default

Since we do not save / restore them at all

Type into the input text field, the saved page does not reflect it

I'm having an undefined error when running cypress tests with Cypress version from 11.1.0 to 12.0.2.
Please find the error below,

Because this error occurred during a before all hook we are skipping all of the remaining tests.
at $Cypress.eval (webpack:////Users/###/node_modules/cyclope/src/index.js:12:0)

I struggle to finish savePageIfTestFailed using cypress ten, especially the snippet for support/index.js causes an issue:

import { savePageIfTestFailed } from 'cyclope'
afterEach(savePageIfTestFailed)

The import from causes this error:

File '/home/jomarko/redhat/smart-events/sandbox-ui/node_modules/cyclope/src/index.d.ts' is not a module.ts(2306)

Do you have any suggestion how to setup cyclope for cypress 10 project?

Can we save the full page, zip it up, and return the zip as a buffer

Real app in the browser:

the checkboxes are filled

In Cypress the checkboxes do not show up

Like the input field?

When I run the cypress tests and test ends on a page where there is tag without src attribute, then plugin throws a hard to debug error message.
It happens on this line
https://github.com/bahmutov/cyclope/blob/main/src/index.js#L168
Plugin throws null value exception (can't find startsWith)

Would be nice if plugin would either ignore this empty img tag OR throw a proper error message

cy.get('.todos, .stat').cyclope('todos-and-stats.png', {
  elementSelector: '.todos, .stat',
})

Currently ignores the second CSS selector

When using cyclope as a child command, form the element selector automatically

// get an image of the todos element
// instead of this
cy.get('.todos').cyclope('todos.png', {
   elementSelector: '.todos',
})
// automatically limit the image to ".todos"
cy.get('.todos').cyclope('todos.png')

A failed test is not saved

Seems to be breaking the file save