not able to find the form element while running cypress tests in node js

Question

below is the code i am using to test

describe('Click Search skill without input', function(){
        it('See the error message in the input field in red', () => {
          //cy.get('input').type('');
          cy.get('form').submit()
          cy.get('form')
            .contains("Please enter the skill to be searched")
            //.should("have.css", "color", "rgb(255, 0, 0)");
        })
    })

I have a form element in my html file which my cypress test is not able to get when running tests

<div class="centre">
         <form class="search-skill" action="#" name="searchForm">
            <input type="text" placeholder="Search for a skill you want to learn" name="fsearch" id="search-input">
            <button type="submit"><i class="fa fa-search"></i>
            </button>
         </form>
         <p id="no-records">No matching records found...</p>
         <table id="found-list">
            <tr>
               <th>Name</th>
               <th>Age</th>
               <th>Skill</th>
               <th>Category</th>
               <th>Telephone</th>
            </tr>
         </table>
      </div>

Please suggest what can i do to pass the test

Answer 1

If you want to query by placeholder text, don't use .contains() as it cannot be used for attributes or for inputs.

Try this to get the input

cy.get('form input[placeholder="Please enter the skill to be searched"]')

or this to get the form

cy.get('input[placeholder="Please enter the skill to be searched"]')
  .parent()