"Unexpected token / while parsing selector" error after updating to codeceptjs v3.1.x

[alanreay]

What are you trying to achieve?

Trying to upgrade existing system to latest codeceptjs versions. Selectors are working fine in 3.0.x versions, but after update tests fails with an error on some generated selectors. Selector is created with 'locate' command: const fieldOption = locate(selectors.addFieldOptions).withText(fieldType).withText(fieldName);

What do you get instead?

After update to 3.1.x versions, some selectors no longer work. Tests fail with an error similar to: Unexpected token "/" while parsing selector ".//[./@data-testid = 'field-group-fields']//[./@data-rbd-draggable-id][contains(., 'Project')][contains(., 'Name')]"

Provide console output if related. Use --verbose mode for more details.

    I click "[data-testid=block-table-zero-state-placeholder] button"
    Delaying for 200ms
    I wait for element "[data-testid="field-group-fields"] [data-rbd-draggable-id]"
    I drag and drop {xpath: .//*[./@data-testid = 'field-group-fields']//*[./@data-rbd-draggable-id][contains(., 'Project')][contains(., 'Name')]}, "[data-testid^="table-block-"]"
Parse error at index 117, processing codepoint 0x-1.
    [1] Retrying... Attempt #2
Parse error at index 117, processing codepoint 0x-1.
    [1] Retrying... Attempt #3
Parse error at index 117, processing codepoint 0x-1.
    [1] Retrying... Attempt #4
Parse error at index 117, processing codepoint 0x-1.
    [1] Retrying... Attempt #5
Parse error at index 117, processing codepoint 0x-1.
    [1] Retrying... Attempt #6
Parse error at index 117, processing codepoint 0x-1.
    [1] Error | Error: page.dragAndDrop: Unexpected token "/" while parsing selector ".//*[./@data-testid = 'field-group-fields']//*[./@data-rbd-draggable-id][contains(., 'Project')][contains(., 'Name')]"
    [1] Error | Error: page.dragAndDrop: Unexpected token "/" while parsing selector ".//*[./@data-testid = 'field-group-fields']//*[./@data-rbd-draggable-id][contains(., 'Project')][contains(., 'Name')]"
    [1] Error | Error: page.dragAndDrop: Unexpected token "/" while parsing selector ".//*[./@data-testid = 'field-group-fields']//*[./@data-rbd-draggable-id][contains(., 'Project')][contains(., 'Name')]"
    [1] Error | Error: page.dragAndDrop: Unexpected token "/" while parsing selector ".//*[./@data-testid = 'field-group-fields']//*[./@data-rbd-draggable-id][contains(., 'Project')][contains(., 'Name')]"
    [1] Error | Error: page.dragAndDrop: Unexpected token "/" while parsing selector ".//*[./@data-testid = 'field-group-fields']//*[./@data-rbd-draggable-id][contains(., 'Project')][contains(., 'Name')]"
    [1] Error | Error: page.dragAndDrop: Unexpected token "/" while parsing selector ".//*[./@data-testid = 'field-group-fields']//*[./@data-rbd-draggable-id][contains(., 'Project')][contains(., 'Name')]"
    [1] Error | Error: page.dragAndDrop: Unexpected token "/" while parsing selector ".//*[./@data-testid = 'field-group-fields']//*[./@data-rbd-draggable-id][contains(., 'Project')][contains(., 'Name')]"
    [1] Starting <teardown> session
    [1] <teardown> Stopping recording promises
 › <screenshotOnFail> Test failed, try to save a screenshot

-- FAILURES:

  1) Report Builder Drag and Drop
       Drag and Drop to Group:
     page.dragAndDrop: Unexpected token "/" while parsing selector ".//*[./@data-testid = 'field-group-fields']//*[./@data-rbd-draggable-id][contains(., 'Project')][contains(., 'Name')]"
      at Playwright.proceedDragAndDrop (node_modules/codeceptjs/lib/helper/Playwright.js:2510:24)
      at Playwright.dragAndDrop (node_modules/codeceptjs/lib/helper/Playwright.js:804:31)
      at Step.run (node_modules/codeceptjs/lib/step.js:66:47)
      at /Users/alanreay/dev/reporting-e2e-tests/node_modules/codeceptjs/lib/actor.js:116:23
  
  Scenario Steps:
  - I.dragAndDrop({xpath: .//*[./@data-testid = 'field-group-fields']//*[./@data-rbd-draggable-id][contains(., 'Project')][contains(., 'Name')]}, "[data-testid^="table-block-"]") at Object.dragField (./pages/editTable.js:30:5)
  - I.waitForElement("[data-testid="field-group-fields"] [data-rbd-draggable-id]") at Object.dragField (./pages/editTable.js:28:5)
  - I.click("[data-testid=block-table-zero-state-placeholder] button") at Test.<anonymous> (./tests/reportBuilderDragAndDrop.js:39:5)
  - I.grabAttributeFrom({xpath: .//section[./descendant::*[./@data-testid = 'block-table-zero-state-placeholder']//button]}, "id") at getBlockId (./pages/reportBuilder.js:66:12)
  - I.waitForElement({xpath: .//section[./descendant::*[./@data-testid = 'block-table-zero-state-placeholder']//button]}) at getBlockId (./pages/reportBuilder.js:65:5)
  - I.doubleClick("$builder-layout-table") at Object.addBlock (./pages/reportBuilder.js:79:5)
  - I.waitForElement("$builder-layout-table") at Object.addBlock (./pages/reportBuilder.js:78:5)

Provide test source code if related

const selectors = {
  // Selectors
  addFieldOptions: '[data-testid="field-group-fields"] [data-rbd-draggable-id]',
  groupDropZone: '[data-rbd-droppable-id^="grouping-dropzone"] .placeholder',
  groupInput: '#group-input',
};

function dragToGroup(fieldName, fieldType) {
  I.waitForElement(selectors.addFieldOptions);
  const fieldOption = locate(selectors.addFieldOptions).withText(fieldType).withText(fieldName);
  I.dragAndDrop(fieldOption, selectors.groupDropZone);
  I.waitForValue(selectors.groupInput, `${fieldType}: ${fieldName}`);
}```

### Details

* CodeceptJS version: 3.1.x
* NodeJS Version: 14.17.6
* Operating System: macOS Big Sur (11.6.1)
* playwright: 1.15.0
* Configuration file:

```js
const { output } = require('codeceptjs');
const { setHeadlessWhen } = require('@codeceptjs/configure');
const { setSharedCookies } = require('@codeceptjs/configure');

const {
  BASE_URL,
  BROWSER,
  SCREEN_WIDTH,
  SCREEN_HEIGHT,
} = require('./variables');

// share cookies between browser helpers and REST/GraphQL
setSharedCookies();

// turn on headless mode when running with HEADLESS=true environment variable
setHeadlessWhen(process.env.HEADLESS);

const config = {
  tests: './tests/**/*.js',
  output: './output',
  helpers: {
    Playwright: {
      url: `${BASE_URL}`,
      browser: BROWSER,
      show: true,
      waitForTimeout: 5000,
      windowSize: `${SCREEN_WIDTH}x${SCREEN_HEIGHT}`,
    },
    GraphQL: {
      endpoint: `${BASE_URL}`,
      cleanup: true,
      defaultHeaders: {
        'Content-Type': 'application/json',
        Accept: 'application/json',
      },
    },
  },
  include: {
    I: './steps_file.js',
  },
  bootstrap: null,
  mocha: {},
  name: 'reporting-e2e-tests',
  plugins: {
    autoDelay: {
      enabled: true,
    },
    autoLogin: {
      enabled: true,
      saveToFile: true,
      inject: 'login',
      users: {
        AutomationUser: {
          login: async (I) => {
            output.log('Login Automation User');
            I.amOnPage(`${BASE_URL}/xxxxxxxx?xxxxxxxxx`);
            I.waitForElement('#main-content');
          },
          check: (I) => {
            output.log('Checking login for AutomationUser');
            I.seeCookie('xxxxx');
            I.dontSeeInCurrentUrl('login?nextURL');
          },
        },
      },
    },
    pauseOnFail: {},
    retryFailedStep: {
      enabled: true,
    },
    screenshotOnFail: {
      enabled: true,
    },
    customLocator: {
      enabled: true,
      attribute: 'data-testid',
      prefix: '$',
    },
  },
};

exports.config = config;

[wadamek65]

I believe we've encountered the same error on our project. Most likely caused by changes in #3222. The logic has been refactored and the locator handling is now different.

For reference, dragAndSlide still uses the previous similar logic which seems to work fine.

[kobenguyent]

Closed for now! Feel free to reopen if you still encounter the issue with latest version and would be nice to provide a sample code to reproduce the issue.