By the way, do you guys have any plans to have sub-sections like Vue/React/Angular inside the Component testings docs? because there could be some tricks (like the vue() command from Jess) to settings up some tools with cypress ct in each framework and trying to address those tricks on those sections could help others to speed up their work.

This is a very good idea indeed @User & @User are our docs gurus right now. They are rolling out the new version of the docs and are ironing out the last tech details. Once they are done, we will definitely add some How-tos and classical tests in those sections

I have what may be a strange test idea....but in the process of learning cypress, i'm trying to write test for everything I might normally check visually. I have a password field and want to verify that input is masked. I found the awesome "Overwrite-type-command" example that can be used to mask text from input. But I'm not concerned if someone sees the password in the console of the test runner. All my dev test use easy passwords like admin/password because they don't connect to anything production. I'm trying to verify that when a user enters input, the text is masked. Here is what i have so far:

cy.get('input').should('exist')
    cy.get('input').type('nicepass', { delay: 500 })
    cy.get('input').should('include.text', '********')

The test fails and says text was '' even though i see the mask. If I replace

include.text

with

include.value

i get the value. I can see my input text is masked, but i'm trying to get the test to be my eyes. Is this possible considering all the different ways (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password) the mask might look?

Are you trying to test that the type of input (use

cy.get().then()

and check the attibute) is actually

password

or that it visually looks like star (use visial regression tools like percy or consorts)? Maybe are you trying to check that human eyes could not read it? In this case natural reading algorythms might have to be involved after screenshot. but I would qualify this as overkill

I didn't think about it clearly.....testing for the password attribute is technically all i need since the stars/astrics are built into the browser?

I should be using

use cy.get().then()

considering all i want to verify is input is masked by the browser and the browser will do it if the attribute is correct?

exact

If you want extra "how it looks to my eyes" support you can always hook up visual regression testing with something like Percy

If in the future you choose to bake your own microsoft style crazy password field, it will be time to review the test

else, you can check for

cy.get('input[type=password]').should('be.visible')

(or something like that)

or .should('have.attr', 'type', 'password') // I might be butchering this API, but that's the general idea

Thank you both!

UrWelcom

Hi! 👋 I'm trying out component testing with vite and tailwind and everything seems to work well except the components are completely unstyled in the test runner. Has anyone else run into this? I'm guessing I might have to do something similar to https://github.com/JessicaSachs/cypress-loves-vite/blob/develop/cypress/plugins/index.js but I'm a bit lost since I'm not using windi

does this mean it's not supported? https://github.com/cypress-io/cypress/issues/15992 I've tried with and without JIT mode and it makes no difference from what I can see

Importing the index.css file in the test file seems to work though 🤔

Now I found https://discord.com/channels/755913899261296641/755921564108587038/835302764804177930 and https://github.com/elevatebart/cy-vuecli-tailwind/blob/main/cypress/support/index.js which solves my problem nicely. Sorry for the spam 🤦

Lol, no problem.

I wanted to work with the playground component. I am coming with one custom. It's not perfect at all but it's a start

usage

js
<Playground :test="BaseInput" :events="['input']" />

it generate interaction automatically

it just look likes shit ^^

Oooh. This this is cool

it can be improve a lot i think

I tried to get the component testing libs going with quasar, but was running into webpack issues. The project I'm working on has a bit of an older quasar base. I tried a fresh quasar+vue-cli + cypress components, but it doesn't attach quasar to the vue components... Anyhow, anyone have any luck making them work together in any versions?

Not yet tabmow

@User would you mind setting up a bare bones quasar project that I can fork and clone?

A "Button" or "Input" component would also help a lot

might be a while 😄 but I did find this on the quasar side of things - https://github.com/quasarframework/quasar-testing/issues/163

@User oh no I did not mean to set up a project with cypress in it