driver.js

driver.js copied to clipboard

Hi there!

I have a use case that involves running two different steps on the same element. (Specifically, I'm trying to update the contents of this div with Angular between steps.)

Example:

driver.defineSteps([
	{
		element: '#thing1',
		popover: {
			title: 'Thing 1',
			position: 'top'
		}
	},
	{
		element: '#thing2',
		popover: {
			title: 'Thing 2, Part 1',
			position: 'top'
		}
	},
	{
		element: '#thing2',
		popover: {
			title: 'Thing 2, Part 2',
			position: 'top'
		}
	},
]);

When I do that, I see "Thing 1" and "Thing 2, Part 1". When I click Next, nothing seems to happen – i.e. the popover doesn't update, so the title doesn't change to "Thing2, Part 2" and the Close button isn't added. When I click Next again, the driver ends altogether as if I were looking at the last step.

I've also tried using a different element selector, like div#thing2 or .class#thing2, but it behaves the same way as if I reference them identically (like in my example).

Any light you can shed on this would be wonderful! 😄

start another popover and come back to the 1st popover when it done. it works but not elegant 😋

I ran into this same issue trying to add multiple steps on a single element -- basically a complicated explanation broken up into several smaller parts, but all about the same element.

I managed to find a workaround by surrounding the element in question (e.g. #thing2) with a superfluous div element (say #thing3), and then alternating back and forth between the two until all steps for the element are completed.

This is an example of what the page structure might look like before the change:

<div id="thing2">
	<p>Some stuff that will be highlighted</p>
</div>

And this is what it would look like after applying the workaround:

<div id="thing3">
	<div id="thing2">
		<p>Some stuff that will be highlighted</p>
	</div>
</div>

This might not work for your case if the div itself is changing, but I found it worked out perfectly despite being a bit of a kludge, in the sense that the switching between divs is completely transparent when the driver is running (since they are the same size and one is on top of the other).

In any case, as far as I can tell, this is the only relatively simple way to work around this bug for the moment.

You can put two classes on the same element and put every class in a step 😆 Didn't try it but seems cleaner and it should work!

driver.defineSteps([
	{
		element: '.element1',
		popover: {
			title: 'Thing 1',
			position: 'top'
		}
	},
	{
		element: '.element2-step1',
		popover: {
			title: 'Thing 2, Part 1',
			position: 'top'
		}
	},
	{
		element: '.element2-step2',
		popover: {
			title: 'Thing 2, Part 2',
			position: 'top'
		}
	},
]);

Thing1 <div id="thing1" class="element1"></div>
Thing2 <div id="thing2" class="element2-step1 element2-step2"></div>

Didn't try it but seems cleaner and it should work!

It doesn't :)

It's working. I already tried it. Sounds like you're missing something else. Can you reproduce in codesandbox?

I'm having the same issue can you post your fix in a codepen?

We just released v1.0 of driver.js which has been rewritten from the ground up. This issue should no longer exist. Please have a look at the docs and do let me know if you face any issues.