Как исправить ошибку syntax error unrecognized expression в Cypress

При тестировании веб-приложений с помощью Cypress разработчики часто сталкиваются с ошибкой syntax error, unrecognized expression. В большинстве случаев проблема кроется в неверном синтаксисе селектора или неправильном использовании кавычек. Давайте разберём типичный пример и найдём решение.

Почему возникает ошибка syntax error?

Ошибка появляется, когда Cypress не может распознать переданный CSS-селектор или jQuery-выражение. Чаще всего это связано с:

• Неправильным экранированием специальных символов (например, точки или двоеточия);
• Лишними или отсутствующими кавычками в строке селектора;
• Использованием синтаксиса, несовместимого с методом cy.get().

Пример проблемного кода

Рассмотрим строку, которая вызывает ошибку:

cy.get('document.querySelector(".content .container-fluid .d-flex .cursor-pointer")').click();

Здесь допущено сразу несколько ошибок:

1. Избыточный вызов - document.querySelector не нужен внутри cy.get(), так как Cypress сам ищет элементы по селектору;
2. Неправильные кавычки - внутренние двойные кавычки конфликтуют с внешними одинарными, что приводит к синтаксической ошибке;
3. Сложный селектор - цепочка из нескольких классов без указания тега или ID снижает читаемость и производительность.

Как правильно написать селектор в Cypress

Правильный синтаксис для поиска элемента по нескольким классам выглядит так:

cy.get('.content .container-fluid .d-flex .cursor-pointer').click();

Если вам нужно использовать более сложное выражение, применяйте метод cy.contains() или атрибуты data-cy. Например:

cy.get('[data-cy="submit-button"]').click();

Такой подход делает тесты стабильнее и избегает проблем с экранированием.

Проверка селектора в консоли браузера

Перед тем как вставлять селектор в тест, проверьте его в консоли разработчика:

• Откройте DevTools (F12);
• Введите document.querySelector('.content .container-fluid .d-flex .cursor-pointer');
• Если возвращается null - селектор неверный или элемент не существует на странице.

Также убедитесь, что элемент видим и не скрыт стилями. Cypress по умолчанию ждёт появления элемента, но неправильный селектор приведёт к ошибке.

Заключение

Ошибка syntax error unrecognized expression в Cypress решается простой заменой неверного синтаксиса на корректный CSS-селектор. Избегайте вложенных вызовов document.querySelector и следите за кавычками. Используйте атрибуты data-cy для надёжности тестов.