I am using the a tool provided by saucelabs to create a user test.
I have a div containing an image and when you hover over it a box displaying where your magnifying appears and that area is then displayed to the right
The aim of the test is to verify when a user hovers over my main image a second div is displayed showing a magnified version of that image
So far I have created a test that passes but while I can see the magnification area over the image there is no image being displayed to the right of that. So in my eyes thats failing
Why is the test passing if the image is not being displayed?
NB
My last command is waitForVisible (which passes) and reading the documentation it states
Determines if the specified element is visible. An element can be rendered invisible by setting the CSS "visibility" property to "hidden", or the "display" property to "none", either for the element itself or one of its ancestors. This method will fail if the element is not present.
I'm not familiar with saucelabs nor their tool you mention, but I use RobotFramework + Selenium and I believe they are very alike.
Your problem may be because you are testing the visibility of your popup div only, add a new test just after that to test the visibility of the image to the right.
I would use something like this (please change the command names as needed):
...
Mouse Over | {locator of the element triggering the popup}
Wait Until Element Is Visible | {locator of the div with the magnified area}
Element Should Be Visible | {locator of the magnified image to the right}
Mouse Out | {locator of the element triggering the popup}
Element Should Not Be Visible | {locator of the div with the magnified area}
Element Should Not Be Visible | {locator of the magnified image to the right}
...
This way we first trigger the popup by hovering the image, then we wait for and assert the magnified area delimiter over the image, then we assert the magnified image itself to the right, then we make sure everything is back to normal when we remove the mouse pointer from the image.
Related
After setting up the storybook-tailwind-dark-mode add-on for Storybook (by following these steps), my component is no longer displaying correctly in dark-mode in the Canvas view. The component displays correctly while in Document view and other components are displaying correctly in canvas view, so not every component has this issue.
The elements are visible for a split second before the page goes blank. When inspecting the page, I can see all of the elements are there, but they are just not visible.
The only difference to the HTML seems to be the dark class added to the body element.
Any ideas as to why the elements are no longer displayed would be greatly appreciated ⚡️
I've inspected the elements to see what could be causing the elements to not be displayed. I was expecting to see a change to display:none or an element that is in front of the other elements, causing them to be hidden, but it seems the only change is the dark class being added to body.
I've also looked at ./storybook/preview.js and ./storybook/main.js for anything suspicious but I haven't found anything that looks out of place.
There was a modal <div> that had a dark:bg-gray-800 class that was being overlayed over all of the other elements.
The modal was correctly set in light mode to show and hide according to when the modal was open/closed, but this conditional was not applied for dark mode, so the modal was always open, and hiding the other elements.
The text in my popups is unselectable. I am able to close popups via click, etc., but when hovering the pointer over the text, the pointer remains as the hand icon, and never changes into the I-beam text selection icon. I've tried adding the popups a few different ways, to no avail:
//with visgl/react-mapbox-gl:
<Popup latitude={0.0} longitude={0.0}>this text is unselectable</Popup>
//via the regular api:
new MapboxGL.Popup()
.setLngLat([0.0, 0.0])
.setHtml(<h1>this text is also unselectable</h1>)
.addTo(map);
//this method that I copied from somewhere:
const placeholder = document.createElement('div');
ReactDOM.render(<h1>still unselectable</h1>, placeholder);
new MapboxGL.Popup()
.setDOMContent(placeholder)
.setLngLat()
.addTo(map);
In the Mapbox examples, their text is selectable. Any idea why mine isn't? Thanks.
I believe it will be difficult to get to the exact cause without a running example. Here are some ideas:
Use the same class they use in the examples for the content: mapboxgl-popup-content
Inspect the HTML and see if there isn't some sort of invisible layered element on top of your text. From the Browser DevTools, in the "Inspector" (Firefox) or "Elements" (Chrome) tab, by hovering the tags, you'll be able to see the bounding box of each rendered element like so:
Similar to the point before, check for the z-index CSS property in the rendered element to see if something isn't layering on top of your content
Lastly, there's also the cursor CSS property which you can use to force the cursor's appearance.
I'm trying to use CSS with 'position: fixed' to create a dialog box. When I 'open' the dialog box in chrome I can see the 'dialogbox' in the dropdown where the markup of the fixed element is, but it is not rendered in the way I expect.
Chrome shows that the dialog is there and the position is correct, but the rendering is wrong.
I'm expecting fixed elements to be drawn relative to the viewport regardless of where they are in the DOM, and the z-index is larger than all other elements. What am I doing wrong?
I can't figure out how to remove the scroll bar from my website.
I've looked up ways of doing it on SO but with no luck. It just keeps staying in the box.
I also want to be scrollable but just without the actual scroll bar visible from computers.
(It's not visible via mobile devices which is okay)
Regards,
Alex
There is no standard cross-browser CSS code you can use to render scroll bars invisible. However, you can put your <div id="shoutbox_data"> element inside another <div> element with an id field like "shoutbox_wrapper", set the CSS overflow property of the wrapper element to hidden, and then use JavaScript to automatically resize the wrapper element so it covers up the scrollbox. The idea comes from Jan Bilek, and you can find the JavaScript to accomplish this on his blog.
See the image above, the grid header is always on top.
Here's the image:
This images is like a Menu. When I click the first one, open the menu in horizontal line. WHen I click the second (from top to botton) open the menu for this ˜group˜.
This is an iconic menu.
For the first time, its only shown the first column of icons (in this case "bar" and "favorites", and the grid is displayed correctly.
But once the "bar" button is clicked, the rest of line appears, but the grid header is on top.
This appears to be an absolute layout problem.
I recommend not change extjs classes.
If you do that, will get problems in a future update.
I found that the problem is in the ext-all.css file.
the z-index property in the class:
.x-docked{
position:absolute!important;
z-index:1
}
seems to be the problem.
If I change to zero, it works.