Hey there! I’ve been right where you are—trying to debug tricky issues in CodeceptJS with Cucumber/JS, needing to break out the raw Selenium tools like Actions or the JavaScript Executor but not sure how to get access to the underlying driver. Let me show you exactly how to do this.

CodeceptJS wraps the Selenium driver in its helpers, but it’s super easy to get direct access to it. The key is leveraging the WebDriver helper (since you’re working with Selenium) which holds the native driver instance.

1. Get the Driver Instance #

You can access the driver in two main ways, depending on where you’re writing your code:

Option A: Using the Container Helper (Great for Cucumber Steps) #

In your Cucumber step definitions, fetch the WebDriver helper from CodeceptJS’s container, then grab the browser property—that’s your native Selenium driver!

Here’s a quick example:

const { I, codeceptjs } = inject();

When('I run raw JavaScript to debug an element', async () => {
  // Grab the WebDriver helper
  const webDriverHelper = codeceptjs.container.helpers('WebDriver');
  // Get the native Selenium driver
  const driver = webDriverHelper.browser;

  // Now use the driver directly!
});

Option B: Using I.grabBrowser() (Shorter Syntax) #

If you prefer a more concise approach, CodeceptJS provides the grabBrowser() method that returns the driver directly:

const { I } = inject();

When('I check something with raw driver methods', async () => {
  const driver = await I.grabBrowser();
  // Use the driver here
});

2. Examples: Using Native Selenium Features #

Now that you have the driver, let’s put it to use with the tools you mentioned.

Example 1: JavaScript Executor #

Need to run custom JS to scroll, manipulate elements, or debug? Use executeScript():

When('I scroll the target element into view', async () => {
  const driver = await I.grabBrowser();
  // Grab the element using CodeceptJS's method (or use driver.findElement if you prefer)
  const targetElement = await I.grabElement('#hard-to-reach-element');
  
  // Run raw JS via Selenium
  await driver.executeScript('arguments[0].scrollIntoView({ behavior: "smooth", block: "center" });', targetElement);
});

Example 2: Selenium Actions API (Mouse/Keyboard Actions) #

For complex interactions like drag-and-drop, hover, or key presses, use the Actions API:

When('I drag the source element to the target', async () => {
  const driver = await I.grabBrowser();
  // Initialize the Actions builder
  const actions = driver.actions({ bridge: true });

  // Grab elements
  const source = await I.grabElement('#drag-source');
  const target = await I.grabElement('#drop-target');

  // Perform the drag-and-drop
  await actions.dragAndDrop(source, target).perform();
});

Quick Notes #

• Make sure your codecept.conf.js has the WebDriver helper configured correctly (since this relies on it being active).
• When using grabElement(), it returns the native WebElement object, which is compatible with raw Selenium methods—perfect for passing to executeScript or Actions.
• If you’re using a different helper (like Puppeteer), the approach is similar but you’d access the Puppeteer browser/page instead, but since you mentioned Selenium, WebDriver is the way to go.

That should let you tap into all the native Selenium functionality you need for debugging your BDD tests!

内容的提问来源于stack exchange，提问作者Francislainy Campos