aerokube / selenoid-ui

Graphical user interface for Selenoid project

Selenoid UI

Simple status page with UI updates by SSE, backed by constant polling of status handle of selenoid on small go backend.

Usage

We distribute UI as a lightweight Docker container. To run it type:

$ docker run -d --name selenoid-ui  \
    --link selenoid                 \
    -p 8080:8080                    \
    aerokube/selenoid-ui --selenoid-uri=http://selenoid:4444

where --link selenoid links with running container named selenoid with selenoid inside

Then access the UI on port 8080:

http://localhost:8080/

The following flags are supported:

• --listen - host and port to listen (e.g. :1234)
• --period - data refresh period (e.g. 5s or 1m)
• --selenoid-uri - selenoid uri to fetch data from (e.g. http://selenoid.example.com:4444/)

Features, Screenshots and Complete Guide

Can be found at http://aerokube.com/selenoid-ui/latest/

Usage note

This UI is designed for debug purposes for one selenoid node. If you need monitoring capabilities on more than one selenoid, consider to use external monitoring system

selenoid-ui's Issues

Sessions are hidden if they do not fit on the page

Sessions are placed on the page:

Sessions can not fit on the page:
ER:

AR:

Connecting to selenoid on windows not working

Hi,

what do I have to do, to connect selenoid-ui to a selenoid running on windows to capture the logs and vnc? Currently I just see the session without vnc connection and with the log window showing

Initialize...
Connecting to ws://myserver:54446/ws/logs/4faa0ad0-a89d-4001-b8ff-46687a739e6d...
Connected!
Disconnected

First though was, that it was an issue with ggr or ggr-ui, but I get the same result when connecting selenoid-ui to windows directly. Other selenoids using docker images work fine.

Regards,
Markus

Suggestion for layout in full-screen mode.

version: latest as of Sept 6, 2017

Here are 2 screenshots with different vnc screen resolutions. My real browser resolution is 1920x1080
1366x1920

1920x1080

I think it should be done this way:
if vnc screen resolution is less than a browser viewport it should be centered and shown with given vnc width.
otherwise, it should be scaled to viewport width with vertical scrollbar.

Now it looks like the width depends on vnc screen height and if it quite large, image becomes too small.

Understand how to run VNC when packed in container

Having issue in containers. Works with standalone binary.

Support of wss connections

We want to use nginx proxy with ssl termination but it seems that selenoid-ui doesn't support of secure websockets. I have the following error in console:

Failed when connecting: Error while connecting (SecurityError: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.)

Only one browser type is displayed in the UI even if you have more types in browsers.json

Containers:
aerokube/selenoid:1.2.0
aerokube/selenoid-ui:1.1.0

Minor issue

Only one browser type is displayed in STATS even though we have 3 in config. Onscreen shot you can see the 2 sessions are created: 1 chrome and 1 firefox, but only chrome is being displayed

/etc/selenoid/browsers.json

{
    "chrome": {
        "default": "58.0",
        "versions": {
            "58.0": {
                "image": "selenoid/chrome:58.0",
                "port": "4444",
                "path": "/",
                "tmpfs": {
                    "/tmp": "size=128m"
                }
            }
        }
    },
    "firefox": {
        "default": "52.0",
        "versions": {
            "52.0": {
                "image": "selenoid/firefox:52.0",
                "port": "4444",
                "path": "/wd/hub",
                "tmpfs": {
                    "/tmp": "size=128m"
                }
            }
        }
    },
    "opera": {
        "default": "44.0",
        "versions": {
            "44.0": {
                "image": "selenoid/opera:44.0",
                "port": "4444",
                "path": "/",
                "tmpfs": {
                    "/tmp": "size=128m"
                }
            }
        }
    }
}

Canvas for VNC do not fill whole browser viewport

When I maximize view with VNC session in my browser (Chrome or Firefox on Windows 7), it does not fill whole browser viewport.
While canvas width and height are properly set to 1920 and 1080 respectively, style's width and height are
1122px and 631px:
<canvas width="1920" height="1080" style="width: 1122px; height: 631px; cursor: default;">Canvas not supported.</canvas>
As a result I see something like this:

Any suggestions on how to solve my problem?

Warning in examples about selenoid host

If UI is linked with selenoid, should be mention on how to access selenoid from outside

Add an ability to distinguish runned browsers

When Selenoid runs several containers at the same time Selenoid-UI shows this containers as similar blocks.

It's hard to understand where is needed test is run.
So, I offer to add new capability to Selenoid. Something like this:

{
    "browserName": ...
    "selenoidLabel": "TestLogOnWithRightCredentials"
}

Align sessions in sessions list

Now it looks a little bit ugly

Ability to show capabilities for all available browsers

Currently it's not really clear how to launch browser.

Does not support non root path in UI

I tried to add Apache proxy infront of the SelenoidUI, but as the /events uri is hardcoded into JS it does not work. For example if your apache Proxy url is https://some.nice.server.url/selenoid/ that proxys to http://127.0.0.1:8080/ then it doesn't work.

Feature Request. Custom title.

Add CLI flag for custom title of the webUi.
Then provide the title to the page to be displayed on browser's tab and also somewhere in UI.
When having several Selenoid-UIs on several machines, that would ease switching between them.

Add /ping API

With the introduction of Ggr UI it makes sense because we can have multiple instances of Selenoid UI behind load balancer.

Add possibility to specify port number when run selenoid-ui through Configuration Manager

It would be useful to have possibility to override default port that selenoid-ui is going to start on. I mean something like that:

./cm selenoid-ui start -p 8090.

Or if it already is, please advise how to do that when using Configuration Manager. Thanks in advance.

Update rxConnect

Now it uses rxjs5 by default

Allow to filter sessions by capabilities

Should filter by browser, version, name, id, container

support of locale ru_RU.UTF-8

Inside the selenoid-ui in log window I can not see russian locale
Try to open yandex.ru and try to print the title.
The container of browser is ok.

Can you fix it?

Show custom capability in the list of sessions to differ them

Relates: aerokube/selenoid#164

Layout issues on small screens

When VNC session is disconnected its buttons oveflow logs window. 13" Mac OS 10.12 Firefox 55.0.2.

Turn off full screen vnc on closed session

Now if it happens we show closed indicator right in the middle of the screen

Redirect from session page to the main page when the session is closed

When opening a session for checking session logs/vnc output, and waiting until the test finishes, you have to manually go to the main page again.

But probably we have to be redirected automatically as soon as the session is closed.

Add -version flag support

As described.

[Feature Request] Add a way to send the terminate signal to container from UI.

CUrrently when I run my specs from local machine against GGR, if I want to stop test execution, I should wait until current tests are finished, even if I stopped them locally.
It would be nice to have some button to click to terminate test execution and stop container.
Also it would be cool to secure the element with password or permissions.

Getting Device not configured with verion 1.7.0

I'm getting Device not configured with the new version 1.7.0.

The version from 5 days ago was totally fine...

UIData refresh

@vania-pooh I did tried 1.2.0 as you said but the data is not turning up in UI during the execution.

Execution was in progress but i dont see any data getting reflected in UI.

docker ps -a
CONTAINER ID        IMAGE                        COMMAND                  CREATED              STATUS              PORTS                    NAMES
f27d0a7a8da8        selenoid/chrome:58.0         "/bin/sh -c /entry..."   About a minute ago   Up 57 seconds       4444/tcp                 musing_feynman
5bc35661447a        selenoid/chrome:58.0         "/bin/sh -c /entry..."   About a minute ago   Up 57 seconds       4444/tcp                 quirky_hawking
81ebb48414c2        selenoid/chrome:58.0         "/bin/sh -c /entry..."   About a minute ago   Up 58 seconds       4444/tcp                 elegant_dubinsky
416fa082c2b9        selenoid/chrome:58.0         "/bin/sh -c /entry..."   About a minute ago   Up 58 seconds       4444/tcp                 tender_knuth
0b8089b54c3b        aerokube/selenoid-ui:1.2.0   "/selenoid-ui --se..."   5 minutes ago        Up 5 minutes        0.0.0.0:8080->8080/tcp   selenoid-ui
c6310479466a        aerokube/selenoid            "/usr/bin/selenoid..."   19 minutes ago       Up 19 minutes       0.0.0.0:4444->4444/tcp   selenoid

Show log stream in same place as vnc

Relates aerokube/selenoid#26

Build containers

Selenoid-ui does not receive stats

After starting selenoid-ui and selenoid I do not get statistics in WEB UI
I looked at the docker logs selenoid-ui

2017/05/31 13:30:01 Client added. 9 registered clients
2017/05/31 13:30:01 can't get status (Get http://127.0.0.1:4444/wd/hub/status: dial tcp 127.0.0.1:4444: getsockopt: connection refused)
2017/05/31 13:30:01 Removed client. 8 registered clients
2017/05/31 13:30:01 Removed client. 7 registered clients
2017/05/31 13:30:01 Removed client. 6 registered clients
2017/05/31 13:30:01 Removed client. 5 registered clients
2017/05/31 13:30:01 Removed client. 4 registered clients
2017/05/31 13:30:01 Removed client. 3 registered clients
2017/05/31 13:30:01 Removed client. 2 registered clients
2017/05/31 13:30:01 Removed client. 1 registered clients
2017/05/31 13:30:01 Removed client. 0 registered clients
2017/05/31 13:30:01 Client added. 1 registered clients
2017/05/31 13:30:01 Client added. 2 registered clients
2017/05/31 13:30:01 Client added. 3 registered clients
2017/05/31 13:30:03 can't get status (Get http://127.0.0.1:4444/wd/hub/status: dial tcp 127.0.0.1:4444: getsockopt: connection refused)
2017/05/31 13:30:03 Removed client. 2 registered clients
2017/05/31 13:30:03 Removed client. 1 registered clients
2017/05/31 13:30:05 can't get status (Get http://127.0.0.1:4444/wd/hub/status: dial tcp 127.0.0.1:4444: getsockopt: connection refused)
2017/05/31 13:30:07 can't get status (Get http://127.0.0.1:4444/wd/hub/status: dial tcp 127.0.0.1:4444: getsockopt: connection refused)
2017/05/31 13:30:09 can't get status (Get http://127.0.0.1:4444/wd/hub/status: dial tcp 127.0.0.1:4444: getsockopt: connection refused)
2017/05/31 13:30:11 can't get status (Get http://127.0.0.1:4444/wd/hub/status: dial tcp 127.0.0.1:4444: getsockopt: connection refused)
2017/05/31 13:30:13 can't get status (Get http://127.0.0.1:4444/wd/hub/status: dial tcp 127.0.0.1:4444: getsockopt: connection refused)
2017/05/31 13:30:15 can't get status (Get http://127.0.0.1:4444/wd/hub/status: dial tcp 127.0.0.1:4444: getsockopt: connection refused)

When I run the browser test, they work out correctly

My ENV:

CONTAINER ID        IMAGE                        COMMAND                  CREATED             STATUS              PORTS                    NAMES
890edbb3db75        aerokube/selenoid:1.2.1      "/usr/bin/selenoid..."   7 minutes ago       Up 7 minutes        0.0.0.0:4444->4444/tcp   selenoid
255d14fdfb5e        aerokube/selenoid-ui:1.2.0   "/selenoid-ui --pe..."   10 minutes ago      Up 10 minutes       0.0.0.0:8080->8080/tcp   selenoid-ui

Add favicon

Add VNC read-only mode support to UI

As described.

UI don't work on IE and Edge

Merge VNC and LOGS into one screen

Just provide all information about the session that we have.
Now it has a lot of duplicated things in the vnc and logs tabs. Merging will simplify UX and code.

Cross Origin for VNC ws proxy

I was trying to use selenoid ui vnc proxy to serve another frontend but cross origin check doesn't allow that. Would be a problem to add a parameter to switch off Origin check ?

Thanks
Andrea

Session NOT FOUND page ui

Should rethink ui when no any session is active - when not found, or just not connected

Wrong host in webdriver.io example in UI

Should be only host, but now it uses full url
https://github.com/aerokube/selenoid-ui/blob/master/web/src/containers/Capabilities/index.js#L41

Error 404 page not found

After launching the container with params:
docker run -d --name selenoid-ui --net host aerokube/selenoid-ui
When I try to go to the address http://localhost:8080 I get an error Error 404 page not found
Why is this happening?

Migrate to RxJS5

Should help to reduce bundle size and usability

Automatically reconnect to Selenoid on lost connection

As described.

Support multiple selenoid instances

Feature request
Provide ability to connect to multiple selenoid-uri.
For big clusters of selenoids, it will be great to have ability to see stats from one UI.

[Feature request] Possibility to start new sessions for manual testing

It would be quite convenient to have a possibility of starting a new browser session directly in selenoid-ui (and then work with a browser via VNC session directly in selenoid-ui).
This could be used for manual tests / troubleshooting issues with automated tests in specific browser versions (replicate Saucelabs "manual testing" feature)

Preconditions:

• Browser images with VNC should be used.
• Figure out what to do if selenoid-ui is used with ggr-ui / ggr, as creating a new session requires username/password.

Add ability to play VNC via novnc

Having:

1. A ready to use in-browser VNC client: https://github.com/novnc/noVNC
2. Selenoid support for proxying container VNC port (aerokube/selenoid#52)
   Need to somehow show this client in UI.

Handle disconnected event from vnc correctly

How it freezes the last frame until mouse movement.

relates aerokube/selenoid#154

Full-screen view for VNC

Show available custom capabilities

As multiselect with influence to example.
Maybe provide special node in status handle for available custom capabilities

Show selector with "screenResolution", "enableVNC" and add to example if checked. Maybe add some description which will look like comment

Tabs are not clickable due to overlapping with .stats__section-title

Hi,

Chrome 59.0
Resolution 1550x562

Main tabs is not clickable if .stats__section-title element overlaps them.

STR:

1. Open selenoid UI in non fullHD
2. Open dev tools (for example)
3. In order to reproduce the issue resize the height of the browser window to overlap ".stats__section-title" element with the tab links (see screen)
4. Try to click VNC or LOGS
   

Actual result: tabs are not clickable;
Expected result: tabs are clickable;

Show alert in UI on sse connect troubles

Use natural sort in browser list of capabilities section

Currently versions are shown in standard not natural order. Need to fix.

Don't poll on no any clients on sse

Parse cli args