Attribute selector failing with Bootstrap library #320

Closed
matthewblott opened this Issue Dec 19, 2016 · 18 comments

Comments

Projects
None yet
3 participants
@matthewblott

matthewblott commented Dec 19, 2016

I'm not sure if this is an 'issue' as it might be related to the Bootstrap library but as it's a very popular library I thought this is worth logging.

I've only been using Canopy very recently and was getting myself familiar with the selectors so I can use it in my test suite. Anyhow, the following selector used with a login form kept failing ...

"input[name='Name']" << "admin"

I tried variations of the above (putting an @ symbol before name, putting // before input etc) but then tried removing all my js and css and found it worked. So by process of elimination I found the offending file was bootstrap.min.css and when this was removed it worked and when it wasn't it didn't work. FWIW I was using the alpha 5 version of Bootstrap 4 but thought I'd check with Bootstrap 3 and there was the same issue.

@lefthandedgoat

This comment has been minimized.

Show comment
Hide comment
@lefthandedgoat

lefthandedgoat Dec 19, 2016

Owner
Owner

lefthandedgoat commented Dec 19, 2016

@matthewblott

This comment has been minimized.

Show comment
Hide comment
@matthewblott

matthewblott Dec 19, 2016

UPDATE:

It's the collapse class that's causing the issue - when this is removed it works.

(I did go to turtletest.com but it just says "Stay tuned, we are launching very soon...".)

UPDATE:

It's the collapse class that's causing the issue - when this is removed it works.

(I did go to turtletest.com but it just says "Stay tuned, we are launching very soon...".)

@lefthandedgoat

This comment has been minimized.

Show comment
Hide comment
@lefthandedgoat

lefthandedgoat Dec 19, 2016

Owner
Owner

lefthandedgoat commented Dec 19, 2016

@matthewblott

This comment has been minimized.

Show comment
Hide comment
@matthewblott

matthewblott Dec 19, 2016

UPDATE 2:

Although I'd specified the problem being the collapse class this was / is still an issue. When inspected the Bootstrap stylesheet sets the css to display:none for collapse but the Bootstrap JS then overrides this so that it can be toggled - and therefore any containing elements should be visible upon page load.

The good news is when I switched to the Chrome driver this worked as expected. There is no issue with the collapse class. The bad news is this doesn't work with PhantomJS which is what I was using as I wanted some headless UI testing in my workflow. I did try a workaround by adding the following ...


js "document.querySelector('#exCollapsingNavbar2').className = 'navbar-toggleable-xs';" |> ignore

This JS snippet basically just removes the collapse attribute. This worked insofar as the Name and Password input fields were then visible and I could enter values and click the Login button. However, the next step was to check the login display message is visible and this failed. I couldn't tell from the console messages if the Login button had been clicked but as I'd had issues before I felt it wasn't worth trying to fix my workaround! I'll continue with the Chrome driver for now. Cheers :-)

matthewblott commented Dec 19, 2016

UPDATE 2:

Although I'd specified the problem being the collapse class this was / is still an issue. When inspected the Bootstrap stylesheet sets the css to display:none for collapse but the Bootstrap JS then overrides this so that it can be toggled - and therefore any containing elements should be visible upon page load.

The good news is when I switched to the Chrome driver this worked as expected. There is no issue with the collapse class. The bad news is this doesn't work with PhantomJS which is what I was using as I wanted some headless UI testing in my workflow. I did try a workaround by adding the following ...


js "document.querySelector('#exCollapsingNavbar2').className = 'navbar-toggleable-xs';" |> ignore

This JS snippet basically just removes the collapse attribute. This worked insofar as the Name and Password input fields were then visible and I could enter values and click the Login button. However, the next step was to check the login display message is visible and this failed. I couldn't tell from the console messages if the Login button had been clicked but as I'd had issues before I felt it wasn't worth trying to fix my workaround! I'll continue with the Chrome driver for now. Cheers :-)

@lefthandedgoat

This comment has been minimized.

Show comment
Hide comment
@lefthandedgoat

lefthandedgoat Dec 19, 2016

Owner
Owner

lefthandedgoat commented Dec 19, 2016

@matthewblott

This comment has been minimized.

Show comment
Hide comment
@matthewblott

matthewblott Dec 19, 2016

I'm on macOS but the test suite will eventually be running on Linux (Ubuntu Server). I never use Windows (I'm not a hater but I switched our tech stack over to Linux a couple of years ago).

matthewblott commented Dec 19, 2016

I'm on macOS but the test suite will eventually be running on Linux (Ubuntu Server). I never use Windows (I'm not a hater but I switched our tech stack over to Linux a couple of years ago).

@lefthandedgoat

This comment has been minimized.

Show comment
Hide comment
@lefthandedgoat

lefthandedgoat Dec 19, 2016

Owner

With linux its easy. You can install a package that provides a headless X11 server and you can launch the .exe there. I suspect its the same with macOS.

Give me a little bit of time and I will try to create a gist demonstrating how to do it in all 3 OS. May take a while but I will start with linux then macOS then windows.

Owner

lefthandedgoat commented Dec 19, 2016

With linux its easy. You can install a package that provides a headless X11 server and you can launch the .exe there. I suspect its the same with macOS.

Give me a little bit of time and I will try to create a gist demonstrating how to do it in all 3 OS. May take a while but I will start with linux then macOS then windows.

@matthewblott

This comment has been minimized.

Show comment
Hide comment
@matthewblott

matthewblott Dec 19, 2016

Thanks Chris, your help is appreciated :-)

Thanks Chris, your help is appreciated :-)

@lefthandedgoat

This comment has been minimized.

Show comment
Hide comment
@lefthandedgoat

lefthandedgoat Dec 19, 2016

Owner

Good news I got linux to working with a fresh install of Ubuntu server.

Steps (sorry I didn't create a shell script because I suck at linux)

Install Ubuntu server to VM
git clone your code
wget the chrome driver and unzip it
Install mono-complete and fsharp via apt
Install chrome via apt
Install install xvfb via apt
Run DISPLAY=:1 xvfb-run sudo sh build.sh

image

I will try osx soonish

Owner

lefthandedgoat commented Dec 19, 2016

Good news I got linux to working with a fresh install of Ubuntu server.

Steps (sorry I didn't create a shell script because I suck at linux)

Install Ubuntu server to VM
git clone your code
wget the chrome driver and unzip it
Install mono-complete and fsharp via apt
Install chrome via apt
Install install xvfb via apt
Run DISPLAY=:1 xvfb-run sudo sh build.sh

image

I will try osx soonish

@matthewblott

This comment has been minimized.

Show comment
Hide comment
@matthewblott

matthewblott Dec 19, 2016

Excellent work, it's a bit late here now (I'm in the UK) but I'll try this out tomorrow. FWIW I'm terrible at bash myself and prefer to use something else for scripting!

Excellent work, it's a bit late here now (I'm in the UK) but I'll try this out tomorrow. FWIW I'm terrible at bash myself and prefer to use something else for scripting!

@lefthandedgoat

This comment has been minimized.

Show comment
Hide comment
@lefthandedgoat

lefthandedgoat Dec 19, 2016

Owner
Owner

lefthandedgoat commented Dec 19, 2016

@matthewblott

This comment has been minimized.

Show comment
Hide comment
@matthewblott

matthewblott Dec 20, 2016

I had a look at this today and got it working. I already had Mono and F# installed but here are the other commands I then ran to get everything else installed.

sudo apt-get update

wget https://chromedriver.storage.googleapis.com/2.26/chromedriver_linux64.zip

sudo apt-get install unzip

unzip chromedriver_linux64.zip

wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
sudo sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
sudo apt-get update
sudo apt-get install google-chrome-stable

sudo apt-get install xvfb

It's pretty much as you've put it though I had to Google for the Chrome install.

I then created a test file as follows

vim canopy.fsx

With the following contents

#r "./WebDriver.dll"
#r "./packages/canopy/lib/canopy.dll"

open canopy
open runner

canopy.configuration.chromeDir <- "."

start chrome

"Should check home page h1" &&& fun _ ->
  url "http://coderscoffeehouse.com/"

  "h1" == "Coder's Coffee House"

"Should check about page h1" &&& fun _ ->
  url "http://coderscoffeehouse.com/about"

  "h1" == "About"

run()

quit()

This is when I hit problems. If you notice the WebDriver.dll file is not in the packages directory. I have nuget installed but the version didn't work. I got some strange error messages saying the path couldn't be found and it was checking the Linux system bin directories. So I tried root but then copied the WebDriver.dll from the CanopyStarterKit and that worked. Reason: there's an issue with version 3.0.1 of Selenium.WebDriver.dll - switch to version 3.0.0 as this works.

I was then able to run the following.

DISPLAY=:1 xvfb-run fsharpi canopy.fsx

Note that sudo isn't required (at least it wasn't for me).

I'll probably do a blog post on this but it's Christmas week so it probably won't be until the festivities are over. Thanks again for your good work on this :-)

I had a look at this today and got it working. I already had Mono and F# installed but here are the other commands I then ran to get everything else installed.

sudo apt-get update

wget https://chromedriver.storage.googleapis.com/2.26/chromedriver_linux64.zip

sudo apt-get install unzip

unzip chromedriver_linux64.zip

wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
sudo sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
sudo apt-get update
sudo apt-get install google-chrome-stable

sudo apt-get install xvfb

It's pretty much as you've put it though I had to Google for the Chrome install.

I then created a test file as follows

vim canopy.fsx

With the following contents

#r "./WebDriver.dll"
#r "./packages/canopy/lib/canopy.dll"

open canopy
open runner

canopy.configuration.chromeDir <- "."

start chrome

"Should check home page h1" &&& fun _ ->
  url "http://coderscoffeehouse.com/"

  "h1" == "Coder's Coffee House"

"Should check about page h1" &&& fun _ ->
  url "http://coderscoffeehouse.com/about"

  "h1" == "About"

run()

quit()

This is when I hit problems. If you notice the WebDriver.dll file is not in the packages directory. I have nuget installed but the version didn't work. I got some strange error messages saying the path couldn't be found and it was checking the Linux system bin directories. So I tried root but then copied the WebDriver.dll from the CanopyStarterKit and that worked. Reason: there's an issue with version 3.0.1 of Selenium.WebDriver.dll - switch to version 3.0.0 as this works.

I was then able to run the following.

DISPLAY=:1 xvfb-run fsharpi canopy.fsx

Note that sudo isn't required (at least it wasn't for me).

I'll probably do a blog post on this but it's Christmas week so it probably won't be until the festivities are over. Thanks again for your good work on this :-)

@lefthandedgoat

This comment has been minimized.

Show comment
Hide comment
@lefthandedgoat

lefthandedgoat Dec 20, 2016

Owner

Awesome.

I was just working on this and it will save me some time.

I am going to improve https://github.com/lefthandedgoat/canopyStarterKit with a shell script that does these things so that people can 'clone and go'.

Please put a link to your blog post if you do decide to write one, and I will let you know when I finish what I was working on. I just finished setting up a base ubuntu server image that I can clone/retry with.

Thanks!!!

Owner

lefthandedgoat commented Dec 20, 2016

Awesome.

I was just working on this and it will save me some time.

I am going to improve https://github.com/lefthandedgoat/canopyStarterKit with a shell script that does these things so that people can 'clone and go'.

Please put a link to your blog post if you do decide to write one, and I will let you know when I finish what I was working on. I just finished setting up a base ubuntu server image that I can clone/retry with.

Thanks!!!

@lefthandedgoat

This comment has been minimized.

Show comment
Hide comment
@lefthandedgoat

lefthandedgoat Dec 20, 2016

Owner

I created a script that sets up everything and will run the hello world start kit example that I created here https://github.com/lefthandedgoat/canopyStarterKit

I will let you know what I learn about macOS and Windows headless.

Owner

lefthandedgoat commented Dec 20, 2016

I created a script that sets up everything and will run the hello world start kit example that I created here https://github.com/lefthandedgoat/canopyStarterKit

I will let you know what I learn about macOS and Windows headless.

@lefthandedgoat

This comment has been minimized.

Show comment
Hide comment
@lefthandedgoat

lefthandedgoat Dec 20, 2016

Owner

For macOS I am not seeing anything obvious after a good bit of searching and trying stuff. I even isntalled XQuartz but it turns out that the macOS versions of Chrome and Firefox are written for Quartz and not X11, so they don't respect the Xvfb stuff.

My friend @amirrajan would write his code in a almost completely maximized window on a different desktop and when the browser launched it would launch behind his code, so it wasn't actually headless, but it did not get in his way.

Owner

lefthandedgoat commented Dec 20, 2016

For macOS I am not seeing anything obvious after a good bit of searching and trying stuff. I even isntalled XQuartz but it turns out that the macOS versions of Chrome and Firefox are written for Quartz and not X11, so they don't respect the Xvfb stuff.

My friend @amirrajan would write his code in a almost completely maximized window on a different desktop and when the browser launched it would launch behind his code, so it wasn't actually headless, but it did not get in his way.

@matthewblott

This comment has been minimized.

Show comment
Hide comment
@matthewblott

matthewblott Jan 17, 2017

I finally got round to putting a tutorial together here. I couldn't find your email address so thought I'd post the link here :-)

I finally got round to putting a tutorial together here. I couldn't find your email address so thought I'd post the link here :-)

@lefthandedgoat

This comment has been minimized.

Show comment
Hide comment
@lefthandedgoat

lefthandedgoat Jan 17, 2017

Owner

awesome thanks!

lefthandedgoat -at- gmail is my email

Owner

lefthandedgoat commented Jan 17, 2017

awesome thanks!

lefthandedgoat -at- gmail is my email

@amirrajan

This comment has been minimized.

Show comment
Hide comment
@amirrajan

amirrajan Jul 26, 2017

Collaborator

Closed (no activity).

Collaborator

amirrajan commented Jul 26, 2017

Closed (no activity).

@amirrajan amirrajan closed this Jul 26, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment