Missing letters when using type

[Mattinn]

Current behavior:

I just upgraded to Cypress 3.2.0 and noticed this strange behavior with type

For some reason the first letter gets cut out, this test used to run fine in 3.1.5.

Desired behavior:

That the typed text does not get cut short

Steps to reproduce: (app code and test code)

The test

  it('Successful login', () => {
    cy.visit('/')
    cy.get('head title')
    .should('contain', 'Log in')
    cy.get('#email')
      .type('Admin{enter}', {force: true, delay: 700})
    cy.get('#password')
      .type('superSafePassword{enter}')
    cy.get('.primary').click()
    cy.get('#title')
      .should('contain', 'Dashboard')
  });
});

The form

<div class='right'>
  <p class='greeting'>Log in to your account</p>
  <ListErrors {errors}/>

  <form on:submit='submit(event)' autocomplete='off'>
    <fieldset class='login'>
      <img alt='user' src='img/user.svg' class='login-icon' />
      <input type='text' placeholder='Email' id='email' autocomplete='off' bind:value=email>
    </fieldset>

    <fieldset class='login'>
      <img alt='password' src='img/password.svg' class='login-icon' />
      <input type='password' placeholder='Password' id='password' autocomplete='new-password' bind:value=password>
    </fieldset>
    <Button kind='primary block' type='submit' disabled='{!email || !password}'>Log in</Button>
  </form>
</div>

Versions

Windows 10
Cypress 3.2.0
Chrome 73.0.3683.86 (Official Build) (64-bit)

[Mattinn]

I added cy.wait(500); in the beginning of the test and now it passes. Seems like Cy runs just a bit too fast :) What is the recommended action when dealing with issues like this? I dont really want to add wait to all of my test cases

[bahmutov]

@Mattinn this is a common question and a problem. See my two blog posts about it

• https://www.cypress.io/blog/2019/01/22/when-can-the-test-click/
• https://www.cypress.io/blog/2018/02/05/when-can-the-test-start/

[Mattinn]

Thanks Gleb, these posts explain the problem very well 👍

[AngelRajan]

I'm still having same issue. I try to
type('AID')
type('First name')
type('Last name')
etc and the first letters are skipping

[davidyell]

I found this issue when Googling for why my field is missing the first few characters of my type.

cy.get('#customer-postcode').type('W1A 1AA');
cy.get('#customer-postcode').should('have.value', 'W1A 1AA');

I expected to see W1A 1AA but usually all I get is A 1AA or a variation thereof. I have had to add a check for the value to force the test to fail when Cypress cannot correctly fill the field.

I am using Cypress 4.10.0

[t0lkman]

same here

[kpassoubady]

This is not flaky cypress 4.11.0 has the same issue

[jennifer-shehane]

Some of you may be experiencing this issue: #5480

This specific issue that the original poster was experiencing has been closed as fixed however.

If you're experiencing a bug similar to this in Cypress, please open a new issue with a fully reproducible example that we can run. There may be a specific edge case with the issue that we need more detail to fix.

[davidyell]

I solved my issue by adding cy.wait(500) before trying to type. Presumably a vagary of my interface.

[AngelRajan]

I solved my issue by adding cy.wait(500) before trying to type. Presumably a vagary of my interface.

I don't think it is a good idea to keep hardcoded wait before every type.

[t0lkman]

I solved my issue by adding cy.wait(500) before trying to type. Presumably a vagary of my interface.

I don't think it is a good idea to keep hardcoded wait before every type.

so what the alternative ?

[kpassoubady]

By using a work-around like cy.wait() some time the above issue disappears, but the original issue remains the same.

[AngelRajan]

By using a work-around like cy.wait() some time the above issue disappears, but the original issue remains the same.

Yeah. Exactly.

[kpassoubady]

Here is another workaround which worked for me.
I have used tab along with focus and clear to move between input fields.

      cy.get('div[class*=first_name] input').type('Kangs').should('have.value', 'Kangs').tab()
      cy.get('div[class*=last_name] input').focus().clear().type('Passoubady').should('have.value', 'Passoubady').tab()

look for cypress-plugin-tab here

[ashwinisambandan]

I had an issue with password not matching. Here's what i tried and this worked for me.

cy.get("#password").find("[type='password']").wait(500).clear().type('password',{delay: 700}) cy.get("#repeat-password").find("[type='password']").type('password')

[AngelRajan]

I had an issue with password not matching. Here's what i tried

cy.get("#password").find("[type='password']").wait(500).clear().type('password',{delay: 700}) cy.get("#repeat-password").find("[type='password']").type('password')
Does cy.get("#password").wait(500).type('password') work fine?

[bahmutov]

Hey, I see people commenting on this issue, despite it being closed. If you have a reproducible example you can share with us (so we can run it ourselves to see the problem), please open a new issue.

[shirshGit]

Hey, I see people commenting on this issue, despite it being closed. If you have a reproducible example you can share with us (so we can run it ourselves to see the problem), please open a new issue.

If you try to type a big text and use back to back type for 4-5 different fields you might see the issue. using Cypress 6.4.0.

[jennifer-shehane]

@shirshendu30 Please provide code - HTML, CSS, and JS and the Cypress tests that fail with it. Open a new issue.

[shirshGit]

describe('Check Insight Present in Filtertab', function () {
    const explorerPage = new Explorer();
    const login = new Login();
    let filterOptions: string[] = [];
    let check: boolean = false;

    it('Explorer Insight verification', () => {

        cy.visit('url');
        login.email().type('longUserName- 50 chrs');
        login.password().type('longPwd - 40chars');
        login.signInButton().should('be.visible').click();
        explorerPage.filterbutton().should('be.visible').click();
    })

    it('verify Product, Folder, Test in source Explorer', () => {
        
        cy.visit('url');
        login.email().type('longUserName- 50 chrs');
        login.password().type('longPwd - 40chars');
        login.signInButton().should('be.visible').click();
        cy.visit('someotherurl');

    })
})

Mostly when we have two 'it' , 2nd test('it') is only wrting first few characters of the username and password. This is intermittent. mostly seem when used chrome browser.

[jennifer-shehane]

@shirshendu30 We cannot run the code you've provided - there is no HTML/CSS or site to visit. We cannot look into the issue without being able to reproduce it ourselves.

[jonnyparris]

I'm hitting this bug for the 4th time in 12 months of various fresh installations.

1. the WORKAROUND (without using an arbitrary wait()) that I use is simply to duplicate the very first input type() command. Something like the following:

    cy.get("input[name=email]").type("x"); // dummy input to "warm up" Cypress
    cy.get("input[name=email]").clear().type(email);
    cy.get("input[name=password]").type(password);
    cy.get("button[type=submit]").click();

2. This is has been so consistent it's hard to believe that no maintainers can reproduce it; but here's some markup (pug) to run it against that hopefully can help debug (@jennifer-shehane 🙏🏾 ). It's essentially just an input for email and password with a button to submit the form

form
    div
      label(for="email") Email
      input(
        name="email",
        placeholder="Email",
        type="email",
        autocomplete="username"
      )
    div
      label(for="password") Password
      input(
        name="password",
        placeholder="Password",
        type="password",
        autocomplete="current-password"
      )
    button(type="submit") Log in

Really hope this can help because persistent bugs like this for what should be simple example really trip me up when trying to evangelise about the joys & ease of testing with awesome tools like Cypress.

Hope this can help any other googlers or at least help me converge towards this workaround much quicker next time 😅

[akwasin]

This is still an issue.

cy.get('#ContentPlaceHolderMain_Wizard1_SelectPatient_TextBoxSocialNumber').type('19760824-8683').type('{enter}')

I can PM link to test site if needed.

[jennifer-shehane]

@akwasin If you have a reproducible example that we can run completely and see the error, you can email it so [email protected]

[bahmutov]

@akwasin your case seems pretty close to https://www.cypress.io/blog/2018/02/05/when-can-the-test-start/ - from the command log I see you visit the page and immediately do cy.get(...).type(...). It seems you are typing before the page is ready to receive the input, maybe the page is hydrating or scripts are still loading. See if cy.wait(1000) can solve your problem. Of course the best solution is to wait for some external sign that the page is ready to receive the user's input, maybe a CSS class or similar attribute is set or removed when the app finishes bootstrapping.

[akwasin]

@AbrahamBrookes Out of curiosity, do you reckon that its faster to type .type('x').clear().type('text') rather than .wait(500).clear().type('text') or .wait(0).focus().clear().type('text') written by @vazsonyidl that Ive personally started using. I think that double typing just to "warm up cypress" should be avoided.

[AbrahamBrookes]

Depends on how long it takes to type your warm up text I guess. My worry with `wait` is that I just don't like how it smells. If the app takes longer than the `wait` duration to boot for some reason then we're back where we started. I feel like typing and clearing is at least interaction with the app so maybe cypress will pick up a different error somehow. Probably not though, this is just conjecture. I just don't like using lots of waits. edit: Oh I get you you mean my typing speed. I actually duplicate the whole line twice and change the middle one to a `clear()` so it's pretty fast I guess. I'm not that fast a typer.

[akwasin]

@AbrahamBrookes about your edit, You're right on your first point, I was referring to the speed of Cypress handling .type('x').clear().type('text') vs .wait(0).focus().clear().type('text') and not how fast we type on our keyboards.

[komali2]

We're having this issue. I'd love to make a reproducible example but it's likely that reproducing requires having a large app that has relatively large page load times, and our app isn't open source unfortunately. Anyway, seconding the solution others had, for us adding wait(1000) solved it, which we set to (2000) to be safe. Obviously annoying, but it got the job done.

[romankhomitskyi]

We're having this issue. I'd love to make a reproducible example but it's likely that reproducing requires having a large app that has relatively large page load times, and our app isn't open source unfortunately. Anyway, seconding the solution others had, for us adding wait(1000) solved it, which we set to (2000) to be safe. Obviously annoying, but it got the job done.

Could you try plugin cypress real events to see if that works?
Use realClick, and realType

[KittyGarrison]

I am still having this issue as well

[akwasin]

@KittyGarrison luckily there's a good amount of suggestions on how to fix this.
Here's a suggestion from Ben @bschley
#3817 (comment)

[demetris-manikas]

@akwasin Sorry to say but I fail see how waiting for half a second is a good suggestion.
@jennifer-shehane You have to admit that the problem exists and that no solution proposed here is a proper workaround. Please reopen the issue so that the cypress developers or community find the bug and fix it.
Keeping this closed just does not make any sense.

[akwasin]

@demetris-manikas I totally agree but its currently one of the best functional workarounds to the current issue.
.wait(0)
also works if 500 ms is too much for you.

[demetris-manikas]

@akwasin Well... If .click().wait(0) works why doesn't cypress add it in the .type() code and save us all ?
I guess because it does not always work to only call .wait(0).
Anyway...

[bahmutov]

Or you could not enable the input box until the app is you know, ready to process the input? Maybe have the disabled attribute and remove it only after the app has finished scaffolding?

…

Sent from my iPhone

On Feb 16, 2022, at 10:23, Demetris Manikas ***@***.***> wrote:  @akwasin Well... If .click().wait(0) works why doesn't cypress add it in the .type() code and save us all ? I guess because it does not always work to only call .wait(0). Anyway... — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.

[akwasin]

Or possibly add a setting to adjust execution speed, like playwrights slo-mo.

[demetris-manikas]

Or the hell with cypress .type() and use .text() which never failed me.
If in need to type {enter} {esc} etc then .text('sometext').type('{enter}')

Cypress.Commands.add('text', {prevSubject: true}, (subject, text) => {
    subject.val(text)
    return cy.wrap(subject)
})

[romankhomitskyi]

Or the hell with cypress .type() and use .text() which never failed me. If in need to type {enter} {esc} etc then .text('sometext').type('{enter}')

Cypress.Commands.add('text', {prevSubject: true}, (subject, text) => {
    subject.val(text)
    return cy.wrap(subject)
})

Don't you think that is the issue with you application?

[khyamay]

I was having same issue and none of the workaround worked for me. I had to use .type('{enter} some text' ) and it seems to be working for me at least.

[othondev]

In my case, I found the issue with our app design that is causing it. We have a component that overlays all views when user data wasn't loaded that happens for a brief moment but enough to stop cypress typing.

Example to reproduce it:

//test.spec.js
describe("Login and Logout flow", () => {
  const TIMES = 2;
  const something = "0123456789";
  for (let i = 0; i < TIMES; i++) {
    it(`Enter with god email and password ${i}`, () => {
      cy.visit("/");
      cy.get("#x").type(something);
      cy.get("#x").should("have.value", something);
    });
  }
});

//index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
      rel="stylesheet"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css"
      rel="stylesheet"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css"
      rel="stylesheet"
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
    />
    <title>Clash</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
    <script>
      let times = 30;
      document.addEventListener("DOMContentLoaded", function () {
        new Vue({
          el: "#app",
          vuetify: new Vuetify(),
          data: {
            hide: true,
            msg: "",
            dialog: false,
          },
          created: function () {
            setInterval(() => {
              if (--times > 0) {
                this.hide = !this.hide;
              } else {
                this.hide = false;
              }
              console.log({ times });
            }, 20);
          },
        });
      });
    </script>
  </head>
  <body>
    <div id="app">
      <v-app>
        <v-content>
          <v-layout>
            <p>Template 1</p>
            <input id="x" v-model="msg" />
            <p>{{ msg }}</p>
            <v-dialog v-model="hide" scrollable persistent max-width="950px">
              <v-card> Loading... </v-card>
            </v-dialog>
          </v-layout>
        </v-content>
      </v-app>
    </div>
  </body>
</html>

Test results:

Video:

test.js.mp4

I hope this could help.

[romankhomitskyi]

The issue is still exists

[ra00f]

Still exists in v.7.2.0 as well, but a workaround for this, you can use the following.

const httpSettingName = cy.get('[data-testid=cy-http-setting-name]'); // or you can select how you would like to
httpSettingName.wait(0).focus().clear().type('your_value_comes_here');

Waiting 0 ms means you do not slow down your tests but give Cypress enough time to "warm-up".

Is this wait(0) documented somewhere?

[akwasin]

Is this wait(0) documented somewhere?

Nope not that I know of and its extremely anti-pattern'ish but so the best working solution to missing letters.

https://docs.cypress.io/guides/references/best-practices#Unnecessary-Waiting

[gpolanco]

How can this bug persist for so long? Isn't that a bug in .type?

[ry-sny]

I'm also experiencing the same issue. The only workaround that works is adding a hardcoded sleep but I'd like to avoid this if possible.

[maaaariana]

I'm also facing this issue((
@jennifer-shehane

[yuriy1715]

issue still exist!

[stychu]

Yeah, 10.4.0 and I still can experience this as well

[gpolanco]

If they haven't solved it after so long, it will be that the problem is more complicated than it seems (I hope), but still it's strange that nobody says anything about it

[romankhomitskyi]

If they haven't solved it after so long, it will be that the problem is more complicated than it seems (I hope), but still it's strange that nobody says anything about it

Because there is no reproducible example, it can be to multiple reasons

[conversayShawn]

Right now there doesn't seem to be enough information to reproduce the problem on our end. We'll have to close this issue until we can reproduce it. This does not mean that your issue is not happening - it just means that we do not have a path to move forward.

Please open a new issue with a reproducible example and link to this issue. Here are some tips for providing a Short, Self Contained, Correct, Example and our own Troubleshooting Cypress guide.