I'm looking at writing some E2E tests using Playwright. I can see that the library allows tests to be run against Chromium, Firefox and Webkit. My understanding is that Webkit is the underlying engine of Safari, and Chromium is the base of Chrome (and other browsers).
When it comes to testing against Webkit/Chromium, how close is it to testing against the user facing browsers which use the underlying engines? I'd imagine that there would be some quirks which the user can run in to whilst using Safari and it wouldn't be caught when running the tests on Webkit.
Thanks
Stock browsers like Google Chrome, Apple Safari embed rendering engines (Chromium, WebKit) and add stuff on top of them. In particular, they add proprietary media codecs, inject browser extensions, etc. They also add surrounding interfaces such as bookmarks sync. But they reuse the underlying web platform implementation.
Chromium
Chromium is the open source web platform implementation used by Google Chrome, Opera, Microsoft Edge and other browsers. It implements web specs, renders content, works with network, etc. Playwright uses a stock Chromium build that can be automated with the Playwright API for e2e testing.
For Google Chrome things are simple: Chromium is a safe target to test, modulo proprietary media codecs and DRM. You can point Playwright against stock Chrome Canary or Edge Canary to use proprietary media codecs.
WebKit
WebKit is the open source web platform implementation used by Apple Safari and Epiphany. As of June 2020, Playwright provides a WebKit build that can be automated with the Playwright API for e2e testing. Playwright WebKit works across all platforms (macOS, Linux, Windows), in both headless and headful modes.
When WebKit runs on macOS, it is a safe target to test Safari. WebKit on Linux and Windows differs from Apple Safari in the following ways: it uses a non-macOS network stack, uses non-Core Animation to composite scene and produce image raster. This means that screenshots on Linux and Windows will not perfectly match screenshots from macOS. In terms of the web platform, the same WebKit code will layout the page and run JavaScript—it will match how WebKit works in Safari.
To conclude, we consider the browsers provided by Playwright to be the best of what you can get for e2e testing. Running WebKit on a Linux CI would use a different compositing pipeline than macOS, but it can be used for e2e testing of web applications in WebKit-powered browsers.
I've found there are some differences between webkit and Safari depending on which version of the two you're testing against.
I was testing Safari 16.0, and for my purposes Playwright 1v17 seemed to match very well. Upgrading to Safari 16.2 didn't seem to affect that.
But upgrading Playwright to 1v28 though seemed to change the behaviour around getting selection bounding boxes. It's seems more correct, but it's no longer consistent with Safari 16.2.
I'm assuming that WebKit is a bit ahead of Safari, and at some point Safari will catch up, and we'll see they are behaving the same again, but so far that's not happened. (Or maybe it has already, I'm a couple of versions behind at this point).
My solution has been to use both the latest version of Playwright for testing Chromium and Firefox, but use the older version for testing Safari. I am also testing webkit from Playwright 1v28 for interest right now, but I expect Safari will start showing that behaviour at some point.
(NB: Getting the bounding boxes of selections gets different results from each browser, so it's not too surprising that it's changing in WebKit right now. The change seems to be closer to Chrome's behaviour but still not the same).
In case it helps anyone, in my package.json devDependencies I have
"playwright1v17": "npm:playwright#~1.17.2",
"playwright1v28": "npm:playwright#~1.28.1",
and then in the test script I do
import { chromium, webkit, firefox } from 'playwright1v28';
import { webkit as safari16v1 } from 'playwright1v17';
That lets me test both versions of webkit and compare, as well as Chromium and Firefox.
Related
When i have checked the cypress latest version of 12.5.1 it is suggested to use the playwright-webkit where the safari browser is using the webkit engine it seems. here I need to simulate real time safari browser execution. Is there any way to do this?
I have tried to execute the playwright-webkit but unluckily it is not even open the URL and webkit is not working properly and if we switch to chrome or another browser it is working fine. but my request is to execute in safari the most.
I have researched how to test mobile web apps via Appium (to use the mobile sdk)
The achieve automation of opera browser tests, one can use selenium / appium with the opera chrome or presto drivers (imported libraries)
However there is no documentation with regards to running automation on opera mini applications.
Does anyone know if this is possible? Has anyone successfully used Apium to test Opera Mini?
Though it is not supported out of the box by Appium (CHROME, CHROMIUM, SAFARI are listed), you can use operachromiumdriver:
desired_caps['chromedriverExecutable'] = '/absolute/path/to/operadriver'
desired_caps['app'] = os.path.abspath('opera-browser.apk')
desired_caps['appPackage'] = 'com.opera.browser'
desired_caps['androidDeviceSocket'] = desired_caps['appPackage'] + '.devtools'
So I was able to use the opera driver to automate tests on the opera browser on android, however, it was unable to provide the functionality needed to automate testing on the opera mini browser on android.
I built the chromium for android following these instructions https://code.google.com/p/chromium/wiki/AndroidBuildInstructions .
I got the content shell only not the full browser.
Then, I built the Firefox for Android. I successfully got the Full web browser. But the performance of the chrome content shell was much much better than that of Firefox Android build. Now, I want to try building the Firefox Android using chromium rendering Engine, Blink replacing the Gecko rendering Engine. How much is the difficulty level and how can I start.
Thanks,
Chromium uses Blink (earlier Webkit) as its rendering, and V8 for Javascript interpretation along with various 3rd party dependencies. Even though Content shell is a small browser (sans complex UI of Chromium) it is functional and a wrapper over Blink. Having said that fitting Blink with Firefox (instead of Gecko) will be a new project by itself, probably you can try building Webview, so that you can build a simple browser itself in android. http://developer.android.com/reference/android/webkit/WebView.html
Chromium - Open Source project
Chrome- Google's proprietary software + Chromium
In Android only Google Chrome can be installed as APK, wherease Chromium can be built as content shell or used through WebView
https://groups.google.com/a/chromium.org/forum/#!topic/chromium-dev/zMDKC2x9o5w
I am using Webkit Nightly because i'm working on some new HTML5 features. I would like to look at the application full screen, without the window chrome.
Other browsers have F11 and other buttons to go fullscreen, but webkit doesn't. Is there a way I can launch it in fullscreen mode?
Dennis
Webkit is a web content engine and its not a browser on its own. Anyway, which port of webkit are you referring to? GTK+? QT? EFL?
I just downloaded and compiled WebKit-r70098 (for GTK+) on my Ubuntu box following this instructions. The demo browser (GtkLauncher) that comes with it creates a window of 800x600 (hardcoded in the code) and doesn't have a fullscreen feature.
Also, the pre-compiled binaries for Mac OS X that allows Safari to run on top of Webkit, don't offer native fullscreen capabilities. Currently there's no fullscreen without tweaking Safari configuration files or using 3rd party plugins (there are lots of them).
EDIT:
On Windows, webkit.exe also doesn't have fullscreen capabilities.
Can anyone let me know what is the difference between testing a Safari 5 in Windows vs Mac? Are there significant changes in how the page is rendered between windows vs Mac for the same version of Safari? If I test a page in Windows Safari, can I expect the page works exactly same in Mac Safari as long as Safari version matches?
Thanks
Not significant but there are subtle differences, it's difficult to list them as I think it will depend on the html/css and version.
I have noticed small differences on one of my sites in the past, but as I can't remember the details I've found another example that someone has documented.
Anyway, I've satisfied myself that the differences I've seen are too subtle to fully test every release on each machine (the budget is small!), only on major changes.
One small difference for instance is that the iOS version won't allow you autoplay of any media (audio or video) in its html5 player whilst the Windows and Mac versions do.
i notice few thing in windows safari and mac safari,when we choose an image in windows safari then its not display as preview but in mac safari its display as preview before upload.so File reader api is not supporting blog type.