CINXE.COM

<!doctype html><html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://developer.mozilla.org/favicon-48x48.bc390275e955dacb2e65.png"/><link rel="apple-touch-icon" href="https://developer.mozilla.org/apple-touch-icon.528534bba673c38049c2.png"/><meta name="theme-color" content="#ffffff"/><link rel="manifest" href="https://developer.mozilla.org/manifest.f42880861b394dd4dc9b.json"/><link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="MDN Web Docs"/><title>Einführung in automatisiertes Testen - Webentwicklung lernen | MDN</title><link rel="alternate" title="Introduction to automated testing" href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing" hrefLang="en"/><link rel="alternate" title="自動化テストの紹介" href="https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing" hrefLang="ja"/><link rel="alternate" title="自动化测试简介" href="https://developer.mozilla.org/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing" hrefLang="zh"/><link rel="alternate" title="自動化測試介紹" href="https://developer.mozilla.org/zh-TW/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing" hrefLang="zh-Hant"/><link rel="alternate" title="Einführung in automatisiertes Testen" href="https://developer.mozilla.org/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing" hrefLang="de"/><link rel="preload" as="font" type="font/woff2" href="/static/media/Inter.var.c2fe3cb2b7c746f7966a.woff2" crossorigin=""/><link rel="alternate" type="application/rss+xml" title="MDN Blog RSS Feed" href="https://developer.mozilla.org/en-US/blog/rss.xml" hrefLang="en"/><meta name="robots" content="noindex, follow"/><meta name="description" content="Das mehrmalige manuelle Ausführen von Tests in verschiedenen Browsern und auf verschiedenen Geräten pro Tag kann ermüdend und zeitaufwendig werden. Um dies effizient zu handhaben, sollten Sie sich mit Automatisierungstools vertraut machen. In diesem Artikel betrachten wir, welche Möglichkeiten es gibt, wie man Task-Runner verwendet und wie man die Grundlagen kommerzieller Browser-Tests-Automatisierungs-Apps wie Sauce Labs, BrowserStack und TestingBot nutzt."/><meta property="og:url" content="https://developer.mozilla.org/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing"/><meta property="og:title" content="Einführung in automatisiertes Testen - Webentwicklung lernen | MDN"/><meta property="og:type" content="website"/><meta property="og:locale" content="de"/><meta property="og:description" content="Das mehrmalige manuelle Ausführen von Tests in verschiedenen Browsern und auf verschiedenen Geräten pro Tag kann ermüdend und zeitaufwendig werden. Um dies effizient zu handhaben, sollten Sie sich mit Automatisierungstools vertraut machen. In diesem Artikel betrachten wir, welche Möglichkeiten es gibt, wie man Task-Runner verwendet und wie man die Grundlagen kommerzieller Browser-Tests-Automatisierungs-Apps wie Sauce Labs, BrowserStack und TestingBot nutzt."/><meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.d893525a4fb5fb1f67a2.png"/><meta property="og:image:type" content="image/png"/><meta property="og:image:height" content="1080"/><meta property="og:image:width" content="1920"/><meta property="og:image:alt" content="The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background."/><meta property="og:site_name" content="MDN Web Docs"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="MozDevNet"/><link rel="canonical" href="https://developer.mozilla.org/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing"/><style media="print">.article-actions-container,.document-toc-container,.language-menu,.main-menu-toggle,.on-github,.page-footer,.place,.sidebar,.top-banner,.top-navigation-main,ul.prev-next{display:none!important}.main-page-content,.main-page-content pre{padding:2px}.main-page-content pre{border-left-width:2px}</style><script src="/static/js/gtag.js" defer=""></script><script defer="" src="/static/js/main.5e889624.js"></script><link href="/static/css/main.26c64ea7.css" rel="stylesheet"/></head><body><script>if(document.body.addEventListener("load",(t=>{t.target.classList.contains("interactive")&&t.target.setAttribute("data-readystate","complete")}),{capture:!0}),window&&document.documentElement){const t={light:"#ffffff",dark:"#1b1b1b"};try{const e=window.localStorage.getItem("theme");e&&(document.documentElement.className=e,document.documentElement.style.backgroundColor=t[e]);const o=window.localStorage.getItem("nop");o&&(document.documentElement.dataset.nop=o)}catch(t){console.warn("Unable to read theme from localStorage",t)}}</script><div id="root"><ul id="nav-access" class="a11y-nav"><li><a id="skip-main" href="#content">Skip to main content</a></li><li><a id="skip-search" href="#top-nav-search-input">Skip to search</a></li><li><a id="skip-select-language" href="#languages-switcher-button">Skip to select language</a></li></ul><div class="page-wrapper category-learn document-page"><div class="top-banner loading"><section class="place top container"></section></div><div class="sticky-header-container"><header class="top-navigation "><div class="container "><div class="top-navigation-wrap"><a href="/de/" class="logo" aria-label="MDN homepage"><svg id="mdn-docs-logo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 694.9 104.4" style="enable-background:new 0 0 694.9 104.4" xml:space="preserve" role="img"><title>MDN Web Docs</title><path d="M40.3 0 11.7 92.1H0L28.5 0h11.8zm10.4 0v92.1H40.3V0h10.4zM91 0 62.5 92.1H50.8L79.3 0H91zm10.4 0v92.1H91V0h10.4z" class="logo-m"></path><path d="M627.9 95.6h67v8.8h-67v-8.8z" class="logo-_"></path><path d="M367 42h-4l-10.7 30.8h-5.5l-10.8-26h-.4l-10.5 26h-5.2L308.7 42h-3.8v-5.6H323V42h-6.5l6.8 20.4h.4l10.3-26h4.7l11.2 26h.5l5.7-20.3h-6.2v-5.6H367V42zm34.9 20c-.4 3.2-2 5.9-4.7 8.2-2.8 2.3-6.5 3.4-11.3 3.4-5.4 0-9.7-1.6-13.1-4.7-3.3-3.2-5-7.7-5-13.7 0-5.7 1.6-10.3 4.7-14s7.4-5.5 12.9-5.5c5.1 0 9.1 1.6 11.9 4.7s4.3 6.9 4.3 11.3c0 1.5-.2 3-.5 4.7h-25.6c.3 7.7 4 11.6 10.9 11.6 2.9 0 5.1-.7 6.5-2 1.5-1.4 2.5-3 3-4.9l6 .9zM394 51.3c.2-2.4-.4-4.7-1.8-6.9s-3.8-3.3-7-3.3c-3.1 0-5.3 1-6.9 3-1.5 2-2.5 4.4-2.8 7.2H394zm51 2.4c0 5-1.3 9.5-4 13.7s-6.9 6.2-12.7 6.2c-6 0-10.3-2.2-12.7-6.7-.1.4-.2 1.4-.4 2.9s-.3 2.5-.4 2.9h-7.3c.3-1.7.6-3.5.8-5.3.3-1.8.4-3.7.4-5.5V22.3h-6v-5.6H416v27c1.1-2.2 2.7-4.1 4.7-5.7 2-1.6 4.8-2.4 8.4-2.4 4.6 0 8.4 1.6 11.4 4.7 3 3.2 4.5 7.6 4.5 13.4zm-7.7.6c0-4.2-1-7.4-3-9.5-2-2.2-4.4-3.3-7.4-3.3-3.4 0-6 1.2-8 3.7-1.9 2.4-2.9 5-3 7.7V57c0 3 1 5.6 3 7.7s4.5 3.1 7.6 3.1c3.6 0 6.3-1.3 8.1-3.9 1.8-2.7 2.7-5.9 2.7-9.6zm69.2 18.5h-13.2v-7.2c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2 5.7 0 9.8 2.2 12.3 6.5V22.3h-8.6v-5.6h15.8v50.6h6v5.5zM493.2 56v-4.4c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm53.1-1.4c0 5.6-1.8 10.2-5.3 13.7s-8.2 5.3-13.9 5.3-10.1-1.7-13.4-5.1c-3.3-3.4-5-7.9-5-13.5 0-5.3 1.6-9.9 4.7-13.7 3.2-3.8 7.9-5.7 14.2-5.7s11 1.9 14.1 5.7c3 3.7 4.6 8.1 4.6 13.3zm-7.7-.2c0-4-1-7.2-3-9.5s-4.8-3.5-8.2-3.5c-3.6 0-6.4 1.2-8.3 3.7s-2.9 5.6-2.9 9.5c0 3.7.9 6.8 2.8 9.4 1.9 2.6 4.6 3.9 8.3 3.9 3.6 0 6.4-1.3 8.4-3.8 1.9-2.6 2.9-5.8 2.9-9.7zm45 5.8c-.4 3.2-1.9 6.3-4.4 9.1-2.5 2.9-6.4 4.3-11.8 4.3-5.2 0-9.4-1.6-12.6-4.8-3.2-3.2-4.8-7.7-4.8-13.7 0-5.5 1.6-10.1 4.7-13.9 3.2-3.8 7.6-5.7 13.2-5.7 2.3 0 4.6.3 6.7.8 2.2.5 4.2 1.5 6.2 2.9l1.5 9.5-5.9.7-1.3-6.1c-2.1-1.2-4.5-1.8-7.2-1.8-3.5 0-6.1 1.2-7.7 3.7-1.7 2.5-2.5 5.7-2.5 9.6 0 4.1.9 7.3 2.7 9.5 1.8 2.3 4.4 3.4 7.8 3.4 5.2 0 8.2-2.9 9.2-8.8l6.2 1.3zm34.7 1.9c0 3.6-1.5 6.5-4.6 8.5s-7 3-11.7 3c-5.7 0-10.6-1.2-14.6-3.6l1.2-8.8 5.7.6-.2 4.7c1.1.5 2.3.9 3.6 1.1s2.6.3 3.9.3c2.4 0 4.5-.4 6.5-1.3 1.9-.9 2.9-2.2 2.9-4.1 0-1.8-.8-3.1-2.3-3.8s-3.5-1.3-5.8-1.7-4.6-.9-6.9-1.4c-2.3-.6-4.2-1.6-5.7-2.9-1.6-1.4-2.3-3.5-2.3-6.3 0-4.1 1.5-6.9 4.6-8.5s6.4-2.4 9.9-2.4c2.6 0 5 .3 7.2.9 2.2.6 4.3 1.4 6.1 2.4l.8 8.8-5.8.7-.8-5.7c-2.3-1-4.7-1.6-7.2-1.6-2.1 0-3.7.4-5.1 1.1-1.3.8-2 2-2 3.8 0 1.7.8 2.9 2.3 3.6 1.5.7 3.4 1.2 5.7 1.6 2.2.4 4.5.8 6.7 1.4 2.2.6 4.1 1.6 5.7 3 1.4 1.6 2.2 3.7 2.2 6.6zM197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z" class="logo-text"></path></svg></a><button title="Open main menu" type="button" class="button action has-icon main-menu-toggle" aria-haspopup="menu" aria-label="Open main menu" aria-expanded="false"><span class="button-wrap"><span class="icon icon-menu "></span><span class="visually-hidden">Open main menu</span></span></button></div><div class="top-navigation-main"><nav class="main-nav" aria-label="Main menu"><ul class="main-menu nojs"><li class="top-level-entry-container "><button type="button" id="references-button" class="top-level-entry menu-toggle" aria-controls="references-menu" aria-expanded="false">References</button><a href="/de/docs/Web" class="top-level-entry">References</a><ul id="references-menu" class="submenu references hidden inline-submenu-lg" aria-labelledby="references-button"><li class="apis-link-container mobile-only "><a href="/de/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li><li class="html-link-container "><a href="/de/docs/Web/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Structure of content on the web</p></div></a></li><li class="css-link-container "><a href="/de/docs/Web/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Code used to describe document style</p></div></a></li><li class="javascript-link-container "><a href="/de/docs/Web/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">General-purpose scripting language</p></div></a></li><li class="http-link-container "><a href="/de/docs/Web/HTTP" class="submenu-item "><div class="submenu-icon http"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP</div><p class="submenu-item-description">Protocol for transmitting web resources</p></div></a></li><li class="apis-link-container "><a href="/de/docs/Web/API" class="submenu-item "><div class="submenu-icon apis"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web APIs</div><p class="submenu-item-description">Interfaces for building web applications</p></div></a></li><li class="apis-link-container "><a href="/de/docs/Mozilla/Add-ons/WebExtensions" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Extensions</div><p class="submenu-item-description">Developing extensions for web browsers</p></div></a></li><li class="apis-link-container desktop-only "><a href="/de/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li></ul></li><li class="top-level-entry-container active"><button type="button" id="guides-button" class="top-level-entry menu-toggle" aria-controls="guides-menu" aria-expanded="false">Guides</button><a href="/de/docs/Learn" class="top-level-entry">Guides</a><ul id="guides-menu" class="submenu guides hidden inline-submenu-lg" aria-labelledby="guides-button"><li class="apis-link-container mobile-only "><a href="/de/docs/Learn" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="apis-link-container desktop-only "><a href="/de/docs/Learn" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="html-link-container "><a href="/de/docs/Learn/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Learn to structure web content with HTML</p></div></a></li><li class="css-link-container "><a href="/de/docs/Learn/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Learn to style content using CSS</p></div></a></li><li class="javascript-link-container "><a href="/de/docs/Learn/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">Learn to run scripts in the browser</p></div></a></li><li class=" "><a href="/de/docs/Web/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Learn to make the web accessible to all</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="mdn-plus-button" class="top-level-entry menu-toggle" aria-controls="mdn-plus-menu" aria-expanded="false">Plus</button><a href="/de/plus" class="top-level-entry">Plus</a><ul id="mdn-plus-menu" class="submenu mdn-plus hidden inline-submenu-lg" aria-labelledby="mdn-plus-button"><li class=" "><a href="/de/plus" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview</div><p class="submenu-item-description">A customized MDN experience</p></div></a></li><li class=" "><a href="/de/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li><li class=" "><a href="/de/plus/updates" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Updates</div><p class="submenu-item-description">All browser compatibility updates at a glance</p></div></a></li><li class=" "><a href="/en-US/plus/docs/features/overview" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Documentation</div><p class="submenu-item-description">Learn how to use MDN Plus</p></div></a></li><li class=" "><a href="/en-US/plus/docs/faq" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">FAQ</div><p class="submenu-item-description">Frequently asked questions about MDN Plus</p></div></a></li></ul></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/curriculum/">Curriculum <sup class="new">New</sup></a></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/blog/">Blog</a></li><li class="top-level-entry-container "><button type="button" id="tools-button" class="top-level-entry menu-toggle" aria-controls="tools-menu" aria-expanded="false">Tools</button><ul id="tools-menu" class="submenu tools hidden inline-submenu-lg" aria-labelledby="tools-button"><li class=" "><a href="/de/play" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Playground</div><p class="submenu-item-description">Write, test and share your code</p></div></a></li><li class=" "><a href="/en-US/observatory" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP Observatory</div><p class="submenu-item-description">Scan a website for free</p></div></a></li><li class=" "><a href="/en-US/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li></ul></li></ul></nav><div class="header-search"><form action="/de/search" class="search-form search-widget" id="top-nav-search-form" role="search"><label id="top-nav-search-label" for="top-nav-search-input" class="visually-hidden">Search MDN</label><input aria-activedescendant="" aria-autocomplete="list" aria-controls="top-nav-search-menu" aria-expanded="false" aria-labelledby="top-nav-search-label" autoComplete="off" id="top-nav-search-input" role="combobox" type="search" class="search-input-field" name="q" placeholder=" " required="" value=""/><button type="button" class="button action has-icon clear-search-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear search input</span></span></button><button type="submit" class="button action has-icon search-button"><span class="button-wrap"><span class="icon icon-search "></span><span class="visually-hidden">Search</span></span></button><div id="top-nav-search-menu" role="listbox" aria-labelledby="top-nav-search-label"></div></form></div><div class="theme-switcher-menu"><button type="button" class="button action has-icon theme-switcher-menu small" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-theme-os-default "></span>Theme</span></button></div><ul class="auth-container"><li><a href="/users/fxa/login/authenticate/?next=%2Fde%2Fdocs%2FLearn%2FTools_and_testing%2FCross_browser_testing%2FAutomated_testing" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fde%2Fdocs%2FLearn%2FTools_and_testing%2FCross_browser_testing%2FAutomated_testing" target="_self" rel="nofollow" class="button primary mdn-plus-subscribe-link"><span class="button-wrap">Sign up for free</span></a></li></ul></div></div></header><div class="article-actions-container"><div class="container"><button type="button" class="button action has-icon sidebar-button" aria-label="Expand sidebar" aria-expanded="false" aria-controls="sidebar-quicklinks"><span class="button-wrap"><span class="icon icon-sidebar "></span></span></button><nav class="breadcrumbs-container" aria-label="Breadcrumb"><ol typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumbs"><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Webentwicklung lernen</span></a><meta property="position" content="1"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn/Tools_and_testing" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Tools und Tests</span></a><meta property="position" content="2"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Cross-Browser-Testing</span></a><meta property="position" content="3"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name">Einführung in automatisiertes Testen</span></a><meta property="position" content="4"/></li></ol></nav><div class="article-actions"><button type="button" class="button action has-icon article-actions-toggle" aria-label="Article actions"><span class="button-wrap"><span class="icon icon-ellipses "></span><span class="article-actions-dialog-heading">Article Actions</span></span></button><ul class="article-actions-entries"><li class="article-actions-entry"><div class="languages-switcher-menu open-on-focus-within"><button id="languages-switcher-button" type="button" class="button action small has-icon languages-switcher-menu" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-language "></span>Deutsch<span title="Diese Übersetzung ist Teil eines Experiments."><span class="icon icon-experimental "></span></span></span></button><div class="hidden"><ul class="submenu language-menu " aria-labelledby="language-menu-button"><li class=" "><form class="submenu-item locale-redirect-setting"><div class="group"><label class="switch"><input type="checkbox" name="locale-redirect"/><span class="slider"></span><span class="label">Remember language</span></label><a href="https://github.com/orgs/mdn/discussions/739" rel="external noopener noreferrer" target="_blank" title="Enable this setting to automatically switch to this language when it's available. (Click to learn more.)"><span class="icon icon-question-mark "></span></a></div></form></li><li class=" "><a data-locale="en-US" href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing" class="button submenu-item"><span>English (US)</span></a></li><li class=" "><a data-locale="ja" href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing" class="button submenu-item"><span>日本語</span></a></li><li class=" "><a data-locale="zh-CN" href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing" class="button submenu-item"><span>中文 (简体)</span></a></li><li class=" "><a data-locale="zh-TW" href="/zh-TW/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing" class="button submenu-item"><span>正體中文 (繁體)</span></a></li></ul></div></div></li></ul></div></div></div></div><div class="container"><div class="notecard experimental localized-content-note"><p><a href="https://github.com/orgs/mdn/discussions/741" class="external"><strong>Experiment</strong>: Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.</a></p></div></div><div class="main-wrapper"><div class="sidebar-container"><aside id="sidebar-quicklinks" class="sidebar" data-macro="LearnSidebar"><button type="button" class="button action backdrop" aria-label="Collapse sidebar"><span class="button-wrap"></span></button><nav aria-label="Related Topics" class="sidebar-inner"><header class="sidebar-actions"><section class="sidebar-filter-container"><div class="sidebar-filter "><label id="sidebar-filter-label" class="sidebar-filter-label" for="sidebar-filter-input"><span class="icon icon-filter"></span><span class="visually-hidden">Filter sidebar</span></label><input id="sidebar-filter-input" autoComplete="off" class="sidebar-filter-input-field false" type="text" placeholder="Filter" value=""/><button type="button" class="button action has-icon clear-sidebar-filter-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear filter input</span></span></button></div></section></header><div class="sidebar-inner-nav"><div class="in-nav-toc"><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">In diesem Artikel</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#automatisierung_macht_die_dinge_einfach">Automatisierung macht die Dinge einfach</a></li><li class="document-toc-item "><a class="document-toc-link" href="#verwendung_eines_task-runners_zur_automatisierung_von_testtools">Verwendung eines Task-Runners zur Automatisierung von Testtools</a></li><li class="document-toc-item "><a class="document-toc-link" href="#verwendung_kommerzieller_testservices_um_browser-tests_zu_beschleunigen">Verwendung kommerzieller Testservices, um Browser-Tests zu beschleunigen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#zusammenfassung">Zusammenfassung</a></li></ul></section></div></div><div class="sidebar-body"><ol><li class="section"><a href="/de/docs/Learn/Getting_started_with_the_web">Komplette Anfänger beginnen hier!</a></li><li><details><summary>Erste Schritte mit dem Web</summary><ol><li><a href="/de/docs/Learn/Getting_started_with_the_web">Einführung ins Web</a></li><li><a href="/de/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installation von grundlegender Software</a></li><li><a href="/de/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Wie wird Ihre Website aussehen?</a></li><li><a href="/de/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Umgang mit Dateien</a></li><li><a href="/de/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML-Grundlagen</a></li><li><a href="/de/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS-Grundlagen</a></li><li><a href="/de/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript-Grundlagen</a></li><li><a href="/de/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Veröffentlichung Ihrer Website</a></li><li><a href="/de/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Wie das Web funktioniert</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/HTML">HTML — Strukturierung des Webs</a></li><li><details><summary>Einführung in HTML</summary><ol><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML">Einführung in HTML</a></li><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Erste Schritte mit HTML</a></li><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Was ist im Kopfbereich? Metadaten in HTML</a></li><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Grundlagen des HTML-Textes</a></li><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Erstellen von Hyperlinks</a></li><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Erweiterte Textformatierung</a></li><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Struktur eines Dokuments und einer Website</a></li><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Markierung eines Briefes</a></li><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Die Strukturierung einer Seite mit Inhalt</a></li></ol></details></li><li><details><summary>Multimedia und Einbettung</summary><ol><li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding">Multimedia und Einbettung</a></li><li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Bilder in HTML</a></li><li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video- und Audioinhalte</a></li><li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Von Objekt zu iframe — andere Einbettungstechnologien</a></li><li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Vektorgrafiken zum Web hinzufügen</a></li><li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive Images</a></li><li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla Splash-Seite</a></li></ol></details></li><li><details><summary>HTML-Tabellen</summary><ol><li><a href="/de/docs/Learn/HTML/Tables">HTML-Tabellen</a></li><li><a href="/de/docs/Learn/HTML/Tables/Basics">HTML Table Grundlagen</a></li><li><a href="/de/docs/Learn/HTML/Tables/Advanced">Erweiterte Funktionen und Barrierefreiheit von HTML-Tabellen</a></li><li><a href="/de/docs/Learn/HTML/Tables/Structuring_planet_data">Strukturierung von Planeten-Daten</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/CSS">CSS — Gestaltung des Webs</a></li><li><details><summary>CSS erste Schritte</summary><ol><li><a href="/de/docs/Learn/CSS/First_steps">Erste Schritte mit CSS</a></li><li><a href="/de/docs/Learn/CSS/First_steps/What_is_CSS">Was ist CSS?</a></li><li><a href="/de/docs/Learn/CSS/First_steps/Getting_started">Einstieg in CSS</a></li><li><a href="/de/docs/Learn/CSS/First_steps/How_CSS_is_structured">Wie CSS strukturiert ist</a></li><li><a href="/de/docs/Learn/CSS/First_steps/How_CSS_works">Wie CSS funktioniert</a></li><li><a href="/de/docs/Learn/CSS/First_steps/Styling_a_biography_page">Eine Biografieseite stylen</a></li></ol></details></li><li><details><summary>CSS-Bausteine</summary><ol><li><a href="/de/docs/Learn/CSS/Building_blocks">CSS-Grundbausteine</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Selectors">CSS-Selektoren</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Typ-, Klassen- und ID-Selektoren</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attributselektoren</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-Klassen und Pseudo-Elemente</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Kombinatoren</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaskade, Spezifität und Vererbung</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Cascade_layers">Kaskadenschichten</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/The_box_model">Das Boxmodell</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Hintergründe und Rahmen</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Umgang mit unterschiedlichen Textausrichtungen</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Overflowing_content">Überlaufender Inhalt</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Values_and_units">CSS-Werte und Einheiten</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Größe von Elementen in CSS</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Bilder, Medien und Formularelemente</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Styling_tables">Tabellen stylen</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">Erweiterte Styling-Effekte</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Organizing">Organisieren Ihres CSS</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension">Grundlegendes CSS-Verständnis</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper">Erstellen von stilvollem Briefpapier</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/A_cool_looking_box">Eine cool aussehende Box</a></li></ol></details></li><li><details><summary>Textgestaltung</summary><ol><li><a href="/de/docs/Learn/CSS/Styling_text">CSS Textgestaltung</a></li><li><a href="/de/docs/Learn/CSS/Styling_text/Fundamentals">Grundlegende Text- und Schriftgestaltung</a></li><li><a href="/de/docs/Learn/CSS/Styling_text/Styling_lists">Listen stilisieren</a></li><li><a href="/de/docs/Learn/CSS/Styling_text/Styling_links">Styling von Links</a></li><li><a href="/de/docs/Learn/CSS/Styling_text/Web_fonts">Web-Fonts</a></li><li><a href="/de/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Setzen einer Community-Schul-Startseite</a></li></ol></details></li><li><details><summary>CSS-Layout</summary><ol><li><a href="/de/docs/Learn/CSS/CSS_layout">CSS-Layout</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Introduction">Einführung in CSS Layout</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Normal_Flow">Normaler Fluss</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Grids">Raster</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Mehrspaltiges Layout</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsives Design</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Media_queries">Einsteigerleitfaden für Media Queries</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy-Layout-Methoden</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Unterstützung älterer Browser</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Grundlegendes Verständnis von Layouts</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/JavaScript">JavaScript — Dynamisches clientseitiges Skripting</a></li><li><details><summary>JavaScript erste Schritte</summary><ol><li><a href="/de/docs/Learn/JavaScript/First_steps">JavaScript erste Schritte</a></li><li><a href="/de/docs/Learn/JavaScript/First_steps/What_is_JavaScript">Was ist JavaScript?</a></li><li><a href="/de/docs/Learn/JavaScript/First_steps/A_first_splash">Ein erster Sprung in JavaScript</a></li><li><a href="/de/docs/Learn/JavaScript/First_steps/What_went_wrong">Was ist schiefgelaufen? JavaScript-Fehlerbehebung</a></li><li><a href="/de/docs/Learn/JavaScript/First_steps/Variables">Speichern der benötigten Informationen — Variablen</a></li><li><a href="/de/docs/Learn/JavaScript/First_steps/Math">Grundlegende Mathematik in JavaScript – Zahlen und Operatoren</a></li><li><a href="/de/docs/Learn/JavaScript/First_steps/Strings">Umgang mit Text — Strings in JavaScript</a></li><li><a href="/de/docs/Learn/JavaScript/First_steps/Useful_string_methods">Nützliche String-Methoden</a></li><li><a href="/de/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li><li><a href="/de/docs/Learn/JavaScript/First_steps/Silly_story_generator">Silly Story Generator</a></li></ol></details></li><li><details><summary>JavaScript-Bausteine</summary><ol><li><a href="/de/docs/Learn/JavaScript/Building_blocks">JavaScript-Bausteine</a></li><li><a href="/de/docs/Learn/JavaScript/Building_blocks/conditionals">Entscheidungen in Ihrem Code treffen — Bedingte Anweisungen</a></li><li><a href="/de/docs/Learn/JavaScript/Building_blocks/Looping_code">Schleifen-Code</a></li><li><a href="/de/docs/Learn/JavaScript/Building_blocks/Functions">Funktionen — wiederverwendbare Codeblöcke</a></li><li><a href="/de/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Erstellen Sie Ihre eigene Funktion</a></li><li><a href="/de/docs/Learn/JavaScript/Building_blocks/Return_values">Funktionsrückgabewerte</a></li><li><a href="/de/docs/Learn/JavaScript/Building_blocks/Events">Einführung in Ereignisse</a></li><li><a href="/de/docs/Learn/JavaScript/Building_blocks/Event_bubbling">Event bubbling</a></li><li><a href="/de/docs/Learn/JavaScript/Building_blocks/Image_gallery">Bildgalerie</a></li></ol></details></li><li><details><summary>Einführung in JavaScript-Objekte</summary><ol><li><a href="/de/docs/Learn/JavaScript/Objects">Einführung in JavaScript-Objekte</a></li><li><a href="/de/docs/Learn/JavaScript/Objects/Basics">JavaScript Objekt Grundlagen</a></li><li><a href="/de/docs/Learn/JavaScript/Objects/Object_prototypes">Objektprototypen</a></li><li><a href="/de/docs/Learn/JavaScript/Objects/Object-oriented_programming">Objektorientierte Programmierung</a></li><li><a href="/de/docs/Learn/JavaScript/Objects/Classes_in_JavaScript">Klassen in JavaScript</a></li><li><a href="/de/docs/Learn/JavaScript/Objects/JSON">Arbeiten mit JSON</a></li><li><a href="/de/docs/Learn/JavaScript/Objects/Object_building_practice">Objekt-Baupraxis</a></li><li><a href="/de/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Hinzufügen von Funktionen zu unserem hüpfenden Kugeln-Demo</a></li></ol></details></li><li><details><summary>Asynchrones JavaScript</summary><ol><li><a href="/de/docs/Learn/JavaScript/Asynchronous">Asynchrones JavaScript</a></li><li><a href="/de/docs/Learn/JavaScript/Asynchronous/Introducing">Einführung in asynchrones JavaScript</a></li><li><a href="/de/docs/Learn/JavaScript/Asynchronous/Promises">Anleitung zur Verwendung von Promises</a></li><li><a href="/de/docs/Learn/JavaScript/Asynchronous/Implementing_a_promise-based_API">Anleitung zur Implementierung einer Promise-basierten API</a></li><li><a href="/de/docs/Learn/JavaScript/Asynchronous/Introducing_workers">Einführung in Workers</a></li><li><a href="/de/docs/Learn/JavaScript/Asynchronous/Sequencing_animations">Sequenzierung von Animationen</a></li></ol></details></li><li><details><summary>Client-seitige Web-APIs</summary><ol><li><a href="/de/docs/Learn/JavaScript/Client-side_web_APIs">Client-Side-Web-APIs</a></li><li><a href="/de/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Einführung in Web-APIs</a></li><li><a href="/de/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulating documents</a></li><li><a href="/de/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Abrufen von Daten vom Server</a></li><li><a href="/de/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">Third-party APIs</a></li><li><a href="/de/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Grafiken zeichnen</a></li><li><a href="/de/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">Video- und Audio-APIs</a></li><li><a href="/de/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Client-side storage</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/Forms">Webformulare — Arbeiten mit Benutzerdaten</a></li><li><details><summary>Grundlagen der Webformulare</summary><ol><li><a href="/de/docs/Learn/Forms">Bausteine für Webformulare</a></li><li><a href="/de/docs/Learn/Forms/Your_first_form">Ihr erstes Formular</a></li><li><a href="/de/docs/Learn/Forms/How_to_structure_a_web_form">Wie Sie ein Webformular strukturieren</a></li><li><a href="/de/docs/Learn/Forms/Basic_native_form_controls">Basis-Native Formularelemente</a></li><li><a href="/de/docs/Learn/Forms/HTML5_input_types">Die HTML5 input Typen</a></li><li><a href="/de/docs/Learn/Forms/Other_form_controls">Andere Formularelemente</a></li><li><a href="/de/docs/Learn/Forms/Styling_web_forms">Styling von Webformularen</a></li><li><a href="/de/docs/Learn/Forms/Advanced_form_styling">Erweiterte Formular-Stilgestaltung</a></li><li><a href="/de/docs/Learn/Forms/UI_pseudo-classes">UI-Pseudo-Klassen</a></li><li><a href="/de/docs/Learn/Forms/Form_validation">Client-seitige Formularvalidierung</a></li><li><a href="/de/docs/Learn/Forms/Sending_and_retrieving_form_data">Senden von Formulardaten</a></li></ol></details></li><li><details><summary>Erweiterte Techniken für Webformulare</summary><ol><li><a href="/de/docs/Learn/Forms/How_to_build_custom_form_controls">Anleitung zur Erstellung benutzerdefinierter Formularelemente</a></li><li><a href="/de/docs/Learn/Forms/Sending_forms_through_JavaScript">Versenden von Formularen über JavaScript</a></li><li><a href="/de/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS-Eigenschaftskompatibilitätstabelle für Formularelemente</a></li><li><a href="/de/docs/Learn/Forms/HTML_forms_in_legacy_browsers">HTML-Formulare in älteren Browsern</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/Accessibility">Barrierefreiheit — Das Web für alle nutzbar machen</a></li><li><details><summary>Barrierefreiheitsleitfäden</summary><ol><li><a href="/de/docs/Learn/Accessibility">Barrierefreiheit</a></li><li><a href="/de/docs/Learn/Accessibility/What_is_accessibility">Was ist Barrierefreiheit?</a></li><li><a href="/de/docs/Learn/Accessibility/HTML">HTML: Eine gute Grundlage für Barrierefreiheit</a></li><li><a href="/de/docs/Learn/Accessibility/CSS_and_JavaScript">CSS und JavaScript: Barrierefreiheits-Best Practices</a></li><li><a href="/de/docs/Learn/Accessibility/WAI-ARIA_basics">Grundlagen von WAI-ARIA</a></li><li><a href="/de/docs/Learn/Accessibility/Multimedia">Barrierefreie Multimedia</a></li><li><a href="/de/docs/Learn/Accessibility/Mobile">Barrierefreiheit auf Mobilgeräten</a></li><li><a href="/de/docs/Learn/Accessibility/Accessibility_troubleshooting">Bewertung: Barrierefreiheits-Troubleshooting</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/Performance">Leistung — Websites schnell und reaktionsschnell machen</a></li><li><details><summary>Leitfäden zur Leistung</summary><ol><li><a href="/de/docs/Learn/Performance">Webleistung</a></li><li><a href="/de/docs/Learn/Performance/why_web_performance">Der 'Warum' der Web-Performance</a></li><li><a href="/de/docs/Learn/Performance/What_is_web_performance">Was ist Web-Performance?</a></li><li><a href="/de/docs/Learn/Performance/Perceived_performance">Wahrgenommene Leistung</a></li><li><a href="/de/docs/Learn/Performance/Measuring_performance">Messung der Performance</a></li><li><a href="/de/docs/Learn/Performance/Multimedia">Multimedia: Bilder</a></li><li><a href="/de/docs/Learn/Performance/video">Multimedia: Video</a></li><li><a href="/de/docs/Learn/Performance/JavaScript">JavaScript-Leistungsoptimierung</a></li><li><a href="/de/docs/Learn/Performance/HTML">HTML-Leistungsoptimierung</a></li><li><a href="/de/docs/Learn/Performance/CSS">CSS-Leistungsoptimierung</a></li><li><a href="/de/docs/Learn/Performance/business_case_for_performance">Der geschäftliche Nutzen von Web-Performance</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/MathML">MathML — Schreiben von Mathematik mit MathML</a></li><li><details><summary>MathML erste Schritte</summary><ol><li><a href="/de/docs/Learn/MathML/First_steps">Erste Schritte mit MathML</a></li><li><a href="/de/docs/Learn/MathML/First_steps/Getting_started">Erste Schritte mit MathML</a></li><li><a href="/de/docs/Learn/MathML/First_steps/Text_containers">MathML Text-Container</a></li><li><a href="/de/docs/Learn/MathML/First_steps/Fractions_and_roots">MathML-Brüche und -Wurzeln</a></li><li><a href="/de/docs/Learn/MathML/First_steps/Scripts">MathML gescriptete Elemente</a></li><li><a href="/de/docs/Learn/MathML/First_steps/Tables">MathML Tabellen</a></li><li><a href="/de/docs/Learn/MathML/First_steps/Three_famous_mathematical_formulas">Drei berühmte mathematische Formeln</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/../Games">Spiele — Entwicklung von Spielen für das Web</a></li><li><details><summary>Anleitungen und Tutorials</summary><ol><li><a href="/de/docs/Games/Introduction">Einführung in die Spieleentwicklung für das Web</a></li><li><a href="/de/docs/Games/Techniques">Techniken für die Spieleentwicklung</a></li><li><a href="/de/docs/Games/Tutorials">Tutorials</a></li><li><a href="/de/docs/Games/Publishing_games">Publishing Games</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/Tools_and_testing">Werkzeuge und Tests</a></li><li><details><summary>Client-seitige Webentwicklungstools</summary><ol><li><a href="/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools">Verständnis von Client-seitigen Webentwicklungstools</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview">Übersicht über clientseitige Werkzeuge</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">Crashkurs zur Kommandozeile</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">Grundlagen des Paketmanagements</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain">Einführung in eine vollständige Toolchain</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">Bereitstellung unserer App</a></li></ol></details></li><li><details><summary>Einführung in client-seitige Frameworks</summary><ol><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Einführung in client-seitige Frameworks</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Hauptmerkmale von Frameworks</a></li></ol></details></li><li><details><summary>React</summary><ol><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Erste Schritte mit React</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginn unserer React-Task-Liste</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Komponentisieren unserer React-App</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React-Interaktivität: Ereignisse und Status</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React Interaktivität: Bearbeiten, Filtern, bedingtes Rendering</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React-Ressourcen</a></li></ol></details></li><li><details><summary>Ember</summary><ol><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Einstieg in Ember</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember App-Struktur und Komponentisierung</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember-Interaktivität: Events, Klassen und Zustand</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interaktivität: Footer-Funktionalität, bedingtes Rendering</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember-Ressourcen und Fehlerbehebung</a></li></ol></details></li><li><details><summary>Vue</summary><ol><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Einstieg in Vue</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Erstellen unserer ersten Vue-Komponente</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering einer Liste von Vue-Komponenten</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Hinzufügen eines neuen Todo-Formulars: Vue-Ereignisse, Methoden und Modelle</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling von Vue-Komponenten mit CSS</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Verwendung von Vue computed properties</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue bedingte Darstellung: Bearbeitung bestehender Todos</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Vue-Refs und Lifecycle-Methoden zur Fokusverwaltung</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue-Ressourcen</a></li></ol></details></li><li><details><summary>Svelte</summary><ol><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Erste Schritte mit Svelte</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starten unserer Svelte-Tasklisten-App</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamisches Verhalten in Svelte: Arbeiten mit Variablen und Props</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Komponentisierung unserer Svelte-App</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Fortgeschrittenes Svelte: Reaktivität, Lebenszyklus, Barrierefreiheit</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Arbeiten mit Svelte Stores</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript-Unterstützung in Svelte</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Bereitstellung und nächste Schritte</a></li></ol></details></li><li><details><summary>Angular</summary><ol><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started">Erste Schritte mit Angular</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning">Anfang unserer Angular-To-Do-Liste-App</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling">Styling unserer Angular-Anwendung</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component">Erstellen einer Item-Komponente</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering">Filtern unserer To-Do-Elemente</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building">Building Angular applications and further resources</a></li></ol></details></li><li><details><summary>Git und GitHub</summary><ol><li><a href="/de/docs/Learn/Tools_and_testing/GitHub">Git und GitHub</a></li></ol></details></li><li><details open=""><summary>Cross-Browser-Tests</summary><ol><li><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross-Browser-Testing</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Einführung in das Cross-Browser-Testing</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategien zur Durchführung von Tests</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Umgang mit häufigen HTML- und CSS-Problemen</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Umgang mit häufigen JavaScript-Problemen</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Umgang mit häufigen Problemen der Barrierefreiheit</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementierung von Feature-Erkennung</a></li><li><em><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing" aria-current="page">Einführung in automatisiertes Testen</a></em></li><li><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Einrichten Ihrer eigenen Testautomatisierungsumgebung</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/Server-side">Server-seitige Webprogrammierung</a></li><li><details><summary>Erste Schritte</summary><ol><li><a href="/de/docs/Learn/Server-side/First_steps">Server-seitige Website-Programmierung: Erste Schritte</a></li><li><a href="/de/docs/Learn/Server-side/First_steps/Introduction">Einführung in die serverseitige Programmierung</a></li><li><a href="/de/docs/Learn/Server-side/First_steps/Client-Server_overview">Überblick über Client-Server</a></li><li><a href="/de/docs/Learn/Server-side/First_steps/Web_frameworks">Serverseitige Web-Frameworks</a></li><li><a href="/de/docs/Learn/Server-side/First_steps/Website_security">Website-Sicherheit</a></li></ol></details></li><li><details><summary>Django Web-Framework (Python)</summary><ol><li><a href="/de/docs/Learn/Server-side/Django">Django Web Framework (Python)</a></li><li><a href="/de/docs/Learn/Server-side/Django/Introduction">Einführung in Django</a></li><li><a href="/de/docs/Learn/Server-side/Django/development_environment">Einrichten einer Django-Entwicklungsumgebung</a></li><li><a href="/de/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django-Tutorial: Die Local Library Website</a></li><li><a href="/de/docs/Learn/Server-side/Django/skeleton_website">Django-Tutorial Teil 2: Erstellung einer Skelett-Website</a></li><li><a href="/de/docs/Learn/Server-side/Django/Models">Django-Tutorial Teil 3: Verwenden von Modellen</a></li><li><a href="/de/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Teil 4: Django Admin-Seite</a></li><li><a href="/de/docs/Learn/Server-side/Django/Home_page">Django-Tutorial Teil 5: Erstellen unserer Startseite</a></li><li><a href="/de/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Teil 6: Generische Listen- und Detailansichten</a></li><li><a href="/de/docs/Learn/Server-side/Django/Sessions">Django-Tutorial Teil 7: Sessions-Framework</a></li><li><a href="/de/docs/Learn/Server-side/Django/Authentication">Django-Tutorial Teil 8: Benutzer-Authentifizierung und Berechtigungen</a></li><li><a href="/de/docs/Learn/Server-side/Django/Forms">Django Tutorial Teil 9: Arbeiten mit Formularen</a></li><li><a href="/de/docs/Learn/Server-side/Django/Testing">Django Tutorial Teil 10: Testen einer Django-Webanwendung</a></li><li><a href="/de/docs/Learn/Server-side/Django/Deployment">Django-Tutorial Teil 11: Django in Produktion bereitstellen</a></li><li><a href="/de/docs/Learn/Server-side/Django/web_application_security">Django-Webanwendungssicherheit</a></li><li><a href="/de/docs/Learn/Server-side/Django/django_assessment_blog">Bewertung: DIY Django Mini-Blog</a></li></ol></details></li><li><details><summary>Express Web-Framework (Node.js/JavaScript)</summary><ol><li><a href="/de/docs/Learn/Server-side/Express_Nodejs">Express-Webframework (Node.js/JavaScript)</a></li><li><a href="/de/docs/Learn/Server-side/Express_Nodejs/Introduction">Einführung in Express/Node</a></li><li><a href="/de/docs/Learn/Server-side/Express_Nodejs/development_environment">Einrichtung einer Node-Entwicklungsumgebung</a></li><li><a href="/de/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express-Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href="/de/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Teil 2: Erstellung einer Grundstruktur für eine Website</a></li><li><a href="/de/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Teil 3: Verwendung einer Datenbank (mit Mongoose)</a></li><li><a href="/de/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Teil 4: Routen und Controller</a></li><li><a href="/de/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Teil 5: Bibliotheksdaten anzeigen</a></li><li><a href="/de/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Teil 6: Arbeiten mit Formularen</a></li><li><a href="/de/docs/Learn/Server-side/Express_Nodejs/deployment">Express-Tutorial Teil 7: Bereitstellung für die Produktion</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/Common_questions">Weitere Ressourcen</a></li><li><details><summary>Häufige Fragen</summary><ol><li><a href="/de/docs/Learn/Common_questions">Häufige Fragen</a></li><li><a href="/de/docs/Learn/HTML/Howto">HTML verwenden, um häufige Probleme zu lösen</a></li><li><a href="/de/docs/Learn/CSS/Howto">CSS verwenden, um häufige Probleme zu lösen</a></li><li><a href="/de/docs/Learn/JavaScript/Howto">Lösen Sie häufige Probleme in Ihrem JavaScript-Code</a></li><li><a href="/de/docs/Learn/Common_questions/Web_mechanics">Web-Mechanik</a></li><li><a href="/de/docs/Learn/Common_questions/Tools_and_setup">Tools und Einrichtung</a></li><li><a href="/de/docs/Learn/Common_questions/Design_and_accessibility">Design und Barrierefreiheit</a></li></ol></details></li></ol></div></div><section class="place side"></section></nav></aside><div class="toc-container"><aside class="toc"><nav><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">In diesem Artikel</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#automatisierung_macht_die_dinge_einfach">Automatisierung macht die Dinge einfach</a></li><li class="document-toc-item "><a class="document-toc-link" href="#verwendung_eines_task-runners_zur_automatisierung_von_testtools">Verwendung eines Task-Runners zur Automatisierung von Testtools</a></li><li class="document-toc-item "><a class="document-toc-link" href="#verwendung_kommerzieller_testservices_um_browser-tests_zu_beschleunigen">Verwendung kommerzieller Testservices, um Browser-Tests zu beschleunigen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#zusammenfassung">Zusammenfassung</a></li></ul></section></div></nav></aside><section class="place side"></section></div></div><main id="content" class="main-content "><article class="main-page-content" lang="de"><header><h1>Einführung in automatisiertes Testen</h1></header><div class="section-content"><ul class="prev-next"> <li><a class="button secondary" href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection"><span class="button-wrap"> Zurück </span></a></li> <li><a class="button secondary" href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing"><span class="button-wrap"> Übersicht: Cross-Browser-Testing</span></a></li> <li><a class="button secondary" href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment"><span class="button-wrap"> Weiter </span></a></li> </ul> <p>Das mehrmalige manuelle Ausführen von Tests in verschiedenen Browsern und auf verschiedenen Geräten pro Tag kann ermüdend und zeitaufwendig werden. Um dies effizient zu handhaben, sollten Sie sich mit Automatisierungstools vertraut machen. In diesem Artikel betrachten wir, welche Möglichkeiten es gibt, wie man Task-Runner verwendet und wie man die Grundlagen kommerzieller Browser-Tests-Automatisierungs-Apps wie Sauce Labs, BrowserStack und TestingBot nutzt.</p> <figure class="table-container"><table> <tbody> <tr> <th scope="row">Voraussetzungen:</th> <td> Vertrautheit mit den grundlegenden <a href="/de/docs/Learn/HTML">HTML</a>-, <a href="/de/docs/Learn/CSS">CSS</a>- und <a href="/de/docs/Learn/JavaScript">JavaScript</a>-Sprachen; eine Vorstellung über die grundlegenden <a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Prinzipien des Cross-Browser-Testings</a>. </td> </tr> <tr> <th scope="row">Ziel:</th> <td>Ein Verständnis davon zu vermitteln, was automatisiertes Testen beinhaltet, wie es Ihr Leben erleichtern kann und wie Sie einige der kommerziellen Produkte nutzen können, die die Dinge einfacher machen.</td> </tr> </tbody> </table></figure></div><section aria-labelledby="automatisierung_macht_die_dinge_einfach"><h2 id="automatisierung_macht_die_dinge_einfach"><a href="#automatisierung_macht_die_dinge_einfach">Automatisierung macht die Dinge einfach</a></h2><div class="section-content"><p>In diesem Modul haben wir viele verschiedene Möglichkeiten beschrieben, wie Sie Ihre Websites und Apps testen können, und erklärt, welchen Umfang Ihre Bemühungen für das Cross-Browser-Testing haben sollten, in Bezug auf welche Browser zu testen sind, Barrierefreiheitsüberlegungen und mehr. Klingt nach viel Arbeit, nicht wahr?</p> <p>Wir stimmen zu – das manuelle Testen all der Dinge, die wir in den vorherigen Artikeln betrachtet haben, kann wirklich mühsam sein. Glücklicherweise gibt es Tools, die uns dabei helfen, einen Teil dieser Mühsal zu automatisieren. Es gibt zwei Hauptwege, auf denen wir die Tests, über die wir in diesem Modul gesprochen haben, automatisieren können:</p> <ol> <li>Verwenden Sie einen Task-Runner wie <a href="https://gruntjs.com/" class="external" target="_blank">Grunt</a>, <a href="https://gulpjs.com/" class="external" target="_blank">Gulp</a> oder <a href="https://docs.npmjs.com/misc/scripts/" class="external" target="_blank">npm scripts</a>, um Tests während Ihres Build-Prozesses auszuführen und Code aufzuräumen. Dies ist eine großartige Möglichkeit, Aufgaben wie das Linten und Minifizieren von Code durchzuführen, CSS-Präfixe hinzuzufügen oder entstehende JavaScript-Features für maximale Cross-Browser-Reichweite zu transpilen und so weiter.</li> <li>Verwenden Sie ein Browser-Automatisierungssystem wie <a href="https://www.selenium.dev/" class="external" target="_blank">Selenium</a>, um spezifische Tests in installierten Browsern auszuführen und Ergebnisse zurückzugeben, die Sie über Fehler in Browsern informieren, sobald diese auftreten. Kommerzielle Apps für das Cross-Browser-Testing wie <a href="https://saucelabs.com/" class="external" target="_blank">Sauce Labs</a> und <a href="https://www.browserstack.com/" class="external" target="_blank">BrowserStack</a> basieren auf Selenium, erlauben jedoch den Remote-Zugriff auf ihre Einrichtung mittels einer Schnittstelle, wodurch Ihnen die Mühe erspart bleibt, Ihr eigenes Testsystem einzurichten.</li> </ol> <p>Wir werden uns im nächsten Artikel ansehen, wie Sie Ihr eigenes Selenium-basiertes Testsystem einrichten können. In diesem Artikel sehen wir uns an, wie Sie einen Task-Runner einrichten und die grundlegende Funktionalität von kommerziellen Systemen wie den oben genannten nutzen.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Die obigen beiden Kategorien schließen sich nicht gegenseitig aus. Es ist möglich, einen Task-Runner einzurichten, um auf einen Dienst wie Sauce Labs oder LambdaTest über eine API zuzugreifen, Cross-Browser-Tests durchzuführen und Ergebnisse zurückzugeben. Wir werden dies unten ebenfalls betrachten.</p> </div></div></section><section aria-labelledby="verwendung_eines_task-runners_zur_automatisierung_von_testtools"><h2 id="verwendung_eines_task-runners_zur_automatisierung_von_testtools"><a href="#verwendung_eines_task-runners_zur_automatisierung_von_testtools">Verwendung eines Task-Runners zur Automatisierung von Testtools</a></h2><div class="section-content"><p>Wie wir oben gesagt haben, können Sie gängige Aufgaben wie das Linten und Minifizieren von Code erheblich beschleunigen, indem Sie einen Task-Runner verwenden, um alles, was Sie ausführen müssen, automatisch zu einem bestimmten Zeitpunkt in Ihrem Build-Prozess auszuführen. Beispielsweise könnte dies jedes Mal sein, wenn Sie eine Datei speichern, oder zu einem anderen Zeitpunkt. In diesem Abschnitt sehen wir uns an, wie Sie mit Node und Gulp, einer einsteigerfreundlichen Option, die Aufgabenautomatisierung einrichten können.</p></div></section><section aria-labelledby="einrichtung_von_node_und_npm"><h3 id="einrichtung_von_node_und_npm"><a href="#einrichtung_von_node_und_npm">Einrichtung von Node und npm</a></h3><div class="section-content"><p>Die meisten Tools heutzutage basieren auf <a href="/de/docs/Glossary/Node.js">Node.js</a>, daher müssen Sie Node.js zusammen mit seinem zugehörigen Paketmanager, <a href="https://www.npmjs.com/" class="external" target="_blank"><code>npm</code></a>, installieren:</p> <ol> <li>Der einfachste Weg, Node.js und <code>npm</code> zu installieren und zu aktualisieren, führt über einen Node-Version-Manager: Befolgen Sie die Anweisungen unter <a href="/de/docs/Learn/Server-side/Express_Nodejs/development_environment#installing_node">Installieren von Node</a>, um dies zu tun.</li> <li>Stellen Sie sicher, dass Sie <a href="/de/docs/Learn/Server-side/Express_Nodejs/development_environment#testing_your_nodejs_and_npm_installation">überprüfen, ob Ihre Installation erfolgreich war</a>, bevor Sie fortfahren.</li> <li>Wenn Sie Node.js/<code>npm</code> zuvor installiert haben, sollten Sie auf die neuesten Versionen aktualisieren. Dies kann durch Verwendung des Node-Version-Managers durchgeführt werden, um die neuesten LTS-Versionen zu installieren (verweisen Sie erneut auf die oben verlinkten Anweisungen).</li> </ol> <p>Um Node/npm-basierte Pakete in Ihren Projekten zu verwenden, müssen Sie Ihre Projektverzeichnisse als npm-Projekte einrichten. Dies ist leicht zu bewerkstelligen.</p> <p>Zum Beispiel, lassen Sie uns zuerst ein Testverzeichnis erstellen, damit wir ohne die Angst, etwas zu zerbrechen, herumspielen können.</p> <ol> <li> <p>Erstellen Sie ein neues Verzeichnis an einem sinnvollen Ort mit Ihrer Dateimanager-Oberfläche oder in einer Befehlszeile, indem Sie zu dem gewünschten Speicherort navigieren und den folgenden Befehl ausführen:</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>mkdir node-test </code></pre></div> </li> <li> <p>Um dieses Verzeichnis zu einem npm-Projekt zu machen, müssen Sie einfach in Ihr Testverzeichnis gehen und es initialisieren, mit dem folgenden:</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>cd node-test npm init </code></pre></div> </li> <li> <p>Dieser zweite Befehl wird Ihnen viele Fragen stellen, um die erforderlichen Informationen zur Einrichtung des Projekts zu erhalten; Sie können vorerst einfach die Standardoptionen auswählen.</p> </li> <li> <p>Sobald alle Fragen gestellt wurden, wird es Sie fragen, ob die eingegebenen Informationen in Ordnung sind. Geben Sie <code>yes</code> ein und drücken Sie die Eingabetaste/Return, und npm wird eine <code>package.json</code>-Datei in Ihrem Verzeichnis generieren.</p> </li> </ol> <p>Diese Datei ist im Grunde eine Konfigurationsdatei für das Projekt. Sie können sie später anpassen, aber vorerst wird sie ungefähr so aussehen:</p> <div class="code-example"><div class="example-header"><span class="language-name">json</span></div><pre class="brush: json notranslate"><code>{ "name": "node-test", "version": "1.0.0", "description": "Test for npm projects", "main": "index.js", "scripts": { "test": "test" }, "author": "Chris Mills", "license": "MIT" } </code></pre></div> <p>Damit sind Sie bereit, weiterzumachen.</p></div></section><section aria-labelledby="einrichtung_der_gulp-automatisierung"><h3 id="einrichtung_der_gulp-automatisierung"><a href="#einrichtung_der_gulp-automatisierung">Einrichtung der Gulp-Automatisierung</a></h3><div class="section-content"><p>Lassen Sie uns die Einrichtung von Gulp und dessen Verwendung zur Automatisierung einiger Testtools betrachten.</p> <ol> <li> <p> Erstellen Sie zunächst ein Test-npm-Projekt mit dem im unteren Teil des vorherigen Abschnitts beschriebenen Verfahren. Aktualisieren Sie auch die <code>package.json</code>-Datei mit der Zeile: <code>"type": "module"</code>, sodass sie ungefähr so aussieht: </p> <div class="code-example"><div class="example-header"><span class="language-name">json</span></div><pre class="brush: json notranslate"><code>{ "name": "node-test", "version": "1.0.0", "description": "Test for npm projects", "main": "index.js", "scripts": { "test": "test" }, "author": "Chris Mills", "license": "MIT", "type": "module" } </code></pre></div> </li> <li> <p> Als Nächstes benötigen Sie einige Beispielinhalte aus HTML, CSS und JavaScript, auf denen Sie Ihr System testen können — erstellen Sie Kopien unserer Beispieldateien <a href="https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/automation/index.html" class="external" target="_blank">index.html</a>, <a href="https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/automation/main.js" class="external" target="_blank">main.js</a> und <a href="https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/automation/style.css" class="external" target="_blank">style.css</a> in einem Unterordner mit dem Namen <code>src</code> innerhalb Ihres Projektordners. Sie können Ihren eigenen Testinhalt ausprobieren, aber beachten Sie, dass solche Tools nicht auf internem JS/CSS funktionieren — Sie benötigen externe Dateien. </p> </li> <li> <p>Installieren Sie zuerst gulp global (d. h., es wird in allen Projekten verfügbar sein) mit dem folgenden Befehl:</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>npm install --global gulp-cli </code></pre></div> </li> <li> <p>Führen Sie als Nächstes den folgenden Befehl im Stammverzeichnis Ihres npm-Projekts aus, um gulp als Abhängigkeit Ihres Projekts einzurichten:</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>npm install --save-dev gulp </code></pre></div> </li> <li> <p>Erstellen Sie nun eine neue Datei in Ihrem Projektverzeichnis mit dem Namen <code>gulpfile.mjs</code>. Dies ist die Datei, die alle unsere Aufgaben ausführen wird. Fügen Sie in diese Datei Folgendes ein:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>import gulp from "gulp"; export default function (cb) { console.log("Gulp running"); cb(); } </code></pre></div> <p>Damit wird das vorhin installierte <code>gulp</code>-Modul benötigt und dann ein Standardtask exportiert, der nichts anderes macht, als eine Nachricht im Terminal auszugeben — dies ist nützlich, um uns wissen zu lassen, dass Gulp funktioniert. Jeder gulp-Task wird im gleichen grundlegenden Format exportiert — <code>exports.taskName = taskFunction</code>. Jede Funktion nimmt einen Parameter entgegen — einen Callback, der ausgeführt wird, wenn die Aufgabe abgeschlossen ist.</p> </li> <li> <p>Sie können Ihren Standardtask von Gulp mit folgendem Befehl ausführen — probieren Sie dies jetzt aus:</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>gulp </code></pre></div> </li> </ol></div></section><section aria-labelledby="einige_echte_aufgaben_zu_gulp_hinzufügen"><h3 id="einige_echte_aufgaben_zu_gulp_hinzufügen"><a href="#einige_echte_aufgaben_zu_gulp_hinzufügen">Einige echte Aufgaben zu Gulp hinzufügen</a></h3><div class="section-content"><p>Um einige echte Aufgaben zu Gulp hinzuzufügen, müssen wir überlegen, was wir tun möchten. Ein sinnvoller Satz von Grundfunktionen für unser Projekt könnte wie folgt sein:</p> <ul> <li>html-tidy, css-lint und js-hint zum Linten und Melden/Beheben häufiger HTML/CSS/JS-Fehler (siehe <a href="https://www.npmjs.com/package/gulp-htmltidy" class="external" target="_blank">gulp-htmltidy</a>, <a href="https://www.npmjs.com/package/gulp-csslint" class="external" target="_blank">gulp-csslint</a>, <a href="https://www.npmjs.com/package/gulp-jshint" class="external" target="_blank">gulp-jshint</a>).</li> <li>Autoprefixer, um unser CSS zu scannen und benötigte Vendor-Präfixe hinzuzufügen (siehe <a href="https://www.npmjs.com/package/gulp-autoprefixer" class="external" target="_blank">gulp-autoprefixer</a>).</li> <li>babel, um neue JavaScript-Syntax-Features in traditionellen Syntax zu transpilen, die in älteren Browsern funktioniert (siehe <a href="https://www.npmjs.com/package/gulp-babel" class="external" target="_blank">gulp-babel</a>).</li> </ul> <p>Siehe die obigen Links für vollständige Anweisungen zu den verschiedenen Gulp-Paketen, die wir verwenden.</p> <p>Um jedes Plugin zu verwenden, müssen Sie es zuerst über npm installieren, dann alle Abhängigkeiten am Anfang der <code>gulpfile.js</code>-Datei anfordern, dann Ihren Test/die Tests am Ende einfügen und schließlich den Namen Ihrer Aufgabe exportieren, damit diese über Gulp-Befehle verfügbar ist.</p> <h4 id="html-tidy">html-tidy</h4> <ol> <li> <p>Installieren Sie es mit der folgenden Zeile:</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>npm install --save-dev gulp-htmltidy </code></pre></div> <div class="notecard note"> <p><strong>Hinweis:</strong> <code>--save-dev</code> fügt das Paket als Abhängigkeit zu Ihrem Projekt hinzu. Wenn Sie in der <code>package.json</code>-Datei Ihres Projekts nachsehen, werden Sie einen Eintrag dafür im <code>devDependencies</code>-Eigenschaft sehen.</p> </div> </li> <li> <p>Fügen Sie die folgende Abhängigkeit zur <code>gulpfile.js</code> hinzu:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>import htmltidy from "gulp-htmltidy"; </code></pre></div> </li> <li> <p>Fügen Sie den folgenden Test am Ende der <code>gulpfile.js</code> hinzu:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>export function html() { return gulp .src("src/index.html") .pipe(htmltidy()) .pipe(gulp.dest("build")); } </code></pre></div> </li> <li> <p>Ändern Sie den Standardexport zu:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>export default html; </code></pre></div> </li> </ol> <p>Hier nehmen wir unsere Entwicklungsdatei <code>index.html</code> mit <code>gulp.src()</code>, welches uns erlaubt, eine Quelldatei zu erfassen, um damit etwas zu machen.</p> <p>Wir verwenden dann die Funktion <code>pipe()</code>, um diese Quelle an einen anderen Befehl zu übergeben, um damit etwas anderes zu tun. Wir können so viele wie wir wollen miteinander verbinden. Wir führen zunächst <code>htmltidy()</code> auf der Quelle aus, welches durchgeht und Fehler in unserer Datei behebt. Die zweite <code>pipe()</code>-Funktion schreibt die Ausgabe-HTML-Datei in das <code>build</code>-Verzeichnis.</p> <p>Im Eingangsversion der Datei haben Sie möglicherweise bemerkt, dass wir ein leeres</p> <p>-Element eingefügt haben; htmltidy hat dieses entfernt, bis die Ausgabedatei erstellt wurde.</p> <h4 id="autoprefixer_und_css-lint">Autoprefixer und css-lint</h4> <ol> <li> <p>Installieren Sie es mit den folgenden Zeilen:</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>npm install --save-dev gulp-autoprefixer npm install --save-dev gulp-csslint </code></pre></div> </li> <li> <p>Fügen Sie die folgenden Abhängigkeiten hinzu:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>import autoprefixer from "gulp-autoprefixer"; import csslint from "gulp-csslint"; </code></pre></div> </li> <li> <p>Fügen Sie den folgenden Test am Ende hinzu:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>export function css() { return gulp .src("src/style.css") .pipe(csslint()) .pipe(csslint.formatter("compact")) .pipe( autoprefixer({ cascade: false, }), ) .pipe(gulp.dest("build")); } </code></pre></div> </li> <li> <p>Fügen Sie die folgende Eigenschaft zur <code>package.json</code> hinzu:</p> <div class="code-example"><div class="example-header"><span class="language-name">json</span></div><pre class="brush: json notranslate"><code>"browserslist": [ "last 5 versions" ] </code></pre></div> </li> <li> <p>Ändern Sie die Standardaufgabe zu:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>export default gulp.series(html, css); </code></pre></div> </li> </ol> <p>Hier erfassen wir unsere Datei <code>style.css</code>, führen <code>csslint</code> darauf aus (welches eine Liste von Fehlern in Ihrem CSS im Terminal ausgibt), und führen sie dann durch <code>autoprefixer</code>, um alle erforderlichen Präfixe hinzuzufügen, um neue CSS-Features auf älteren Browsern auszuführen. Am Ende der pipe-Kette geben wir unser modifiziertes, mit Präfix versehenes CSS in das Verzeichnis <code>build</code> aus. Beachten Sie, dass dies nur funktioniert, wenn <code>csslint</code> keine Fehler findet — versuchen Sie, eine geschweifte Klammer aus Ihrer CSS-Datei zu entfernen und <code>gulp</code> erneut auszuführen, um zu sehen, welche Ausgabe Sie erhalten!</p> <h4 id="js-hint_und_babel">js-hint und babel</h4> <ol> <li> <p>Installieren Sie es mit den folgenden Zeilen:</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>npm install --save-dev gulp-babel @babel/preset-env npm install --save-dev @babel/core npm install jshint gulp-jshint --save-dev </code></pre></div> </li> <li> <p>Fügen Sie die folgenden Abhängigkeiten hinzu:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>import babel from "gulp-babel"; import jshint from "gulp-jshint"; </code></pre></div> </li> <li> <p>Fügen Sie den folgenden Test am Ende hinzu:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>export function js() { return gulp .src("src/main.js") .pipe(jshint()) .pipe(jshint.reporter("default")) .pipe( babel({ presets: ["@babel/env"], }), ) .pipe(gulp.dest("build")); } </code></pre></div> </li> <li> <p>Ändern Sie die Standardaufgabe zu:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>export default gulp.series(html, css, js); </code></pre></div> </li> </ol> <p>Hier erfassen wir unsere Datei <code>main.js</code>, führen <code>jshint</code> darauf aus und geben die Ergebnisse mit <code>jshint.reporter</code> im Terminal aus; wir übergeben dann die Datei an <code>babel</code>, welches sie in alten Syntax umwandelt und das Ergebnis in das <code>build</code>-Verzeichnis ausgibt. Unser ursprünglicher Code enthielt eine <a href="/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Fat Arrow Function</a>, welche <code>babel</code> in eine alte Funktion umgewandelt hat.</p> <h4 id="weitere_ideen">Weitere Ideen</h4> <p>Sobald alles eingerichtet ist, können Sie den Befehl <code>gulp</code> in Ihrem Projektverzeichnis ausführen und Sie sollten eine Ausgabe erhalten, die wie folgt aussieht:</p> <p> <img src="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing/gulp-output.png" alt="Ausgabe in einem Code-Editor, in dem Zeilen die Start- oder Endzeiten von Aufgaben, den Aufgabennamen und die Dauer von 'Fertiggestellten' Aufgaben anzeigen." width="697" height="478" loading="lazy"> </p> <p>Sie können dann versuchen, die von Ihren automatisierten Aufgaben ausgegebenen Dateien zu testen, indem Sie sie im Verzeichnis <code>build</code> betrachten und <code>build/index.html</code> in Ihrem Webbrowser laden.</p> <p>Wenn Sie Fehler bekommen, überprüfen Sie, ob Sie alle Abhängigkeiten und die Tests wie oben gezeigt hinzugefügt haben; versuchen Sie auch, die HTML/CSS/JavaScript-Codeabschnitte auszukommentieren und <code>gulp</code> erneut auszuführen, um zu sehen, ob Sie das Problem isolieren können.</p> <p>Gulp verfügt über eine <code>watch()</code>-Funktion, mit der Sie Ihre Dateien überwachen und Tests ausführen können, wann immer Sie eine Datei speichern. Zum Beispiel, versuchen Sie, das Folgende am Ende Ihrer <code>gulpfile.js</code> hinzuzufügen:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>export function watch() { gulp.watch("src/*.html", html); gulp.watch("src/*.css", css); gulp.watch("src/*.js", js); } </code></pre></div> <p>Versuchen Sie nun, den Befehl <code>gulp watch</code> in Ihr Terminal einzugeben. Gulp wird nun Ihr Verzeichnis überwachen und die entsprechenden Aufgaben ausführen, wann immer Sie eine Änderung an einer HTML-, CSS- oder JavaScript-Datei speichern.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Das <code>*</code> Zeichen ist ein Platzhalterzeichen — hier sagen wir "führe diese Aufgaben aus, wenn beliebige Dateien dieses Typs gespeichert werden". Sie könnten ebenfalls Platzhalter in Ihren Hauptaufgaben verwenden, z. B. <code>gulp.src('src/*.css')</code> würde alle Ihre CSS-Dateien erfassen und dann gepipte Aufgaben darauf anwenden.</p> </div> <p>Es gibt viel mehr, was Sie mit Gulp machen können. Das <a href="https://gulpjs.com/plugins/" class="external" target="_blank">Gulp-Plugin-Verzeichnis</a> hat buchstäblich tausende von Plugins zum Durchsuchen.</p></div></section><section aria-labelledby="andere_task-runner"><h3 id="andere_task-runner"><a href="#andere_task-runner">Andere Task-Runner</a></h3><div class="section-content"><p>Es gibt viele andere Task-Runner, die verfügbar sind. Wir wollen sicherlich nicht behaupten, dass Gulp die beste Lösung ist, die es gibt, aber es funktioniert für uns und ist für Anfänger ziemlich zugänglich. Sie könnten auch versuchen, andere Lösungen zu verwenden:</p> <ul> <li>Grunt arbeitet sehr ähnlich wie Gulp, außer dass es auf in einer Konfigurationsdatei angegebenen Aufgaben basiert, anstatt geschriebenen JavaScript zu verwenden. Siehe <a href="https://gruntjs.com/getting-started" class="external" target="_blank">Getting started with Grunt for more details</a>.</li> <li>Sie können auch Aufgaben direkt mit npm-Scripts ausführen, die sich in Ihrer <code>package.json</code>-Datei befinden, ohne dass Sie irgendein zusätzliches Task-Runner-System installieren müssen. Dies funktioniert nach dem Prinzip, dass Dinge wie Gulp-Plugins im Grunde Wrapper um Befehlszeilentools sind. Wenn Sie also herausfinden können, wie Sie die Tools mit der Befehlszeile ausführen, können Sie sie dann mit npm-Scripts ausführen. Es ist ein bisschen schwieriger zu handhaben, kann aber lohnend sein für diejenigen, die stark mit ihren Befehlszeilenfähigkeiten sind. <a href="https://css-tricks.com/why-npm-scripts/" class="external" target="_blank">Why npm scripts?</a> bietet eine gute Einführung mit vielen weiteren Informationen.</li> </ul></div></section><section aria-labelledby="verwendung_kommerzieller_testservices_um_browser-tests_zu_beschleunigen"><h2 id="verwendung_kommerzieller_testservices_um_browser-tests_zu_beschleunigen"><a href="#verwendung_kommerzieller_testservices_um_browser-tests_zu_beschleunigen">Verwendung kommerzieller Testservices, um Browser-Tests zu beschleunigen</a></h2><div class="section-content"><p>Schauen wir uns jetzt kommerzielle Drittanbieter-Browser-Testservices an und was sie für uns tun können.</p> <p>Wenn Sie diese Art von Services nutzen, geben Sie eine URL der Seite, die Sie testen möchten, zusammen mit Informationen wie den Browsern, in denen Sie testen möchten, an. Die App konfiguriert dann eine neue VM mit dem von Ihnen angegebenen Betriebssystem und Browser und gibt die Testergebnisse in Form von Screenshots, Videos, Protokolldateien, Text usw. zurück. Das ist sehr praktisch und um einiges bequemer, als all die Kombinationen aus Betriebssystemen und Browsern selbst einrichten zu müssen.</p> <p>Sie können dann einen Gang höher schalten und mithilfe einer API auf die Funktionalität programmatisch zugreifen, was bedeutet, dass solche Apps mit Task-Runnern kombiniert werden können, wie z. B. Ihren eigenen lokalen Selenium-Umgebungen und anderen, um automatisierte Tests zu erstellen.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Es gibt noch andere kommerzielle Browser-Testsysteme, aber in diesem Artikel konzentrieren wir uns auf BrowserStack, Sauce Labs und TestingBot. Wir sagen nicht unbedingt, dass dies die besten Werkzeuge sind, die verfügbar sind, aber sie sind gute Werkzeuge, die einfach für Anfänger zu verwenden sind.</p> </div></div></section><section aria-labelledby="browserstack"><h3 id="browserstack"><a href="#browserstack">BrowserStack</a></h3><div class="section-content"><h4 id="einstieg_in_browserstack">Einstieg in BrowserStack</h4> <p>Um mit BrowserStack loszulegen:</p> <ol> <li>Erstellen Sie ein <a href="https://www.browserstack.com/users/sign_up" class="external" target="_blank">BrowserStack-Testkonto</a>.</li> <li>Melden Sie sich an. Dies sollte automatisch geschehen, nachdem Sie Ihre E-Mail-Adresse bestätigt haben.</li> <li>Klicken Sie auf den Link <em>Live</em> im oberen Navigationsmenü, um zu Live Manual Testing zu gelangen.</li> </ol> <h4 id="die_grundlagen_manuelle_tests">Die Grundlagen: Manuelle Tests</h4> <p>Das BrowserStack Live-Dashboard ermöglicht es Ihnen auszuwählen, auf welchem Gerät und Browser Sie testen möchten — Plattformen auf der linken Seite, Geräte auf der rechten Seite. Wählen Sie ein Gerät aus, um die Auswahl der auf diesem Gerät verfügbaren Browser zu sehen.</p> <p> <img src="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing/browserstack-test-choices-sized.png" alt="Testauswahl" width="1000" height="482" loading="lazy"> </p> <p>Durch Klicken auf eines dieser Browser-Symbole wird Ihre Wahl von Plattform, Gerät und Browser geladen — wählen Sie einen aus und probieren Sie ihn aus.</p> <p> <img src="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing/browserstack-test-device-sized.png" alt="Testgeräte" width="300" height="629" loading="lazy"> </p> <p>Sie können URLs in die Adressleiste eingeben, nach oben und unten scrollen, indem Sie mit der Maus ziehen, und geeignete Gesten (zum Beispiel Pinch/Zoom, zwei Finger zum Scrollen) auf unterstützten Geräten wie MacBooks verwenden. Nicht alle Funktionen sind auf allen Geräten verfügbar.</p> <p>Sie sehen auch ein Menü, das es Ihnen ermöglicht, die Sitzung zu steuern.</p> <p> <img src="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing/browserstack-test-menu-sized.png" alt="Testmenü" width="180" height="519" loading="lazy"> </p> <p>Die verfügbaren Funktionen variieren je nach geladenem Browser und können Steuerungen beinhalten für:</p> <ul> <li>Anzeige von Informationen über den aktuellen Browser</li> <li>Wechseln zu anderen Browsern</li> <li>Testen von localhost-URLs</li> <li>Einstellen des Zoom-Levels und Umschalten der Orientierung</li> <li>Speichern und Laden von Lesezeichen</li> <li>Aufzeichnen/Kommentieren von Screenshots und Erfassen von Fehlerberichten</li> <li>Zugriff auf die DevTools des Browsers</li> <li>Ändern des Meldestandorts</li> <li>Drosseln des Netzwerks</li> <li>Zugriff auf Bildschirmleser</li> </ul> <h4 id="erweitert_die_browserstack_api">Erweitert: Die BrowserStack API</h4> <p>BrowserStack hat auch eine <a href="https://www.browserstack.com/docs/automate/api-reference/selenium/introduction" class="external" target="_blank">restful API</a>, die es Ihnen ermöglicht, programmatisch Details zu Ihrem Konto, Ihren Sitzungen, Builds usw. abzurufen.</p> <p>Lassen Sie uns einen kurzen Blick darauf werfen, wie wir auf die API mit Node.js zugreifen würden.</p> <ol> <li> <p>Richten Sie zunächst ein neues npm-Projekt ein, um dies auszuprobieren, wie im Abschnitt <a href="#einrichtung_von_node_und_npm">Einrichtung von Node und npm</a> beschrieben. Verwenden Sie einen anderen Verzeichnisnamen als zuvor, zum Beispiel <code>bstack-test</code>.</p> </li> <li> <p>Erstellen Sie eine neue Datei im Stammverzeichnis Ihres Projekts mit dem Namen <code>call_bstack.js</code> und geben Sie ihr den folgenden Inhalt:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const axios = require("axios"); const bsUser = "BROWSERSTACK_USERNAME"; const bsKey = "BROWSERSTACK_ACCESS_KEY"; const baseUrl = `https://${bsUser}:${bsKey}@www.browserstack.com/automate/`; function getPlanDetails() { axios.get(`${baseUrl}plan.json`).then((response) => { console.log(response.data); }); /* Response: { automate_plan: <string>, terminal_access: <string>. parallel_sessions_running: <int>, team_parallel_sessions_max_allowed: <int>, parallel_sessions_max_allowed: <int>, queued_sessions: <int>, queued_sessions_max_allowed: <int> } */ } getPlanDetails(); </code></pre></div> </li> <li> <p>Ersetzen Sie die Platzhalter für BrowserStack-Benutzernamen und Zugangsschlüssel durch Ihre tatsächlichen Werte. Diese können von Ihren <a href="https://www.browserstack.com/accounts/profile/details" class="external" target="_blank">BrowserStack Account & Profile Details</a> abgerufen werden, unter dem Abschnitt <em>Authentication & Security</em>.</p> </li> <li> <p>Installieren Sie das <a href="https://www.npmjs.com/package/axios" class="external" target="_blank">axios</a>-Modul, das wir im Code verwenden, um HTTP-Anfragen zu senden, indem Sie den folgenden Befehl in Ihrem Terminal ausführen (wir haben axios gewählt, weil es einfach, populär und gut unterstützt ist):</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>npm install axios </code></pre></div> </li> <li> <p>Stellen Sie sicher, dass Ihre JavaScript-Datei gespeichert ist, und führen Sie sie aus, indem Sie den folgenden Befehl in Ihrem Terminal ausführen. Sie sollten ein Objekt im Terminal sehen, das Ihre BrowserStack-Plandetails enthält.</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>node call_bstack </code></pre></div> </li> </ol> <p>Unten haben wir auch einige andere gebrauchsfertige Funktionen bereitgestellt, die nützlich sein könnten, wenn Sie mit der BrowserStack-RESTful-API arbeiten.</p> <p>Diese Funktion gibt die Zusammenfassung aller zuvor erstellten automatisierten Builds zurück (siehe den nächsten Artikel für <a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment#browserstack">BrowserStack automatisierte Testdetails</a>):</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function getBuilds() { axios.get(`${baseUrl}builds.json`).then((response) => { console.log(response.data); }); /* Response: [ { automation_build: { name: <string>, hashed_id: <string>, duration: <int>, status: <string>, build_tag: <string>, public_url: <string> } }, { automation_build: { name: <string>, hashed_id: <string>, duration: <int>, status: <string>, build_tag: <string>, public_url: <string> } }, // … ] */ } </code></pre></div> <p>Diese Funktion gibt Details zu den spezifischen Sitzungen für einen bestimmten Build zurück:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function getSessionsInBuild(build) { const buildId = build.automation_build.hashed_id; axios.get(`${baseUrl}builds/${buildId}/sessions.json`).then((response) => { console.log(response.data); }); /* Response: [ { automation_session: { name: <string>, duration: <int>, os: <string>, os_version: <string>, browser_version: <string>, browser: <string>, device: <string>, status: <string>, hashed_id: <string>, reason: <string>, build_name: <string>, project_name: <string>, logs: <string>, browser_url: <string>, public_url: <string>, appium_logs_url: <string>, video_url: <string>, browser_console_logs_url: <string>, har_logs_url: <string>, selenium_logs_url: <string> } }, { automation_session: { // … } }, // … ] */ } </code></pre></div> <p>Die folgende Funktion gibt die Details für eine bestimmte Sitzung zurück:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function getSessionDetails(session) { const sessionId = session.automation_session.hashed_id; axios.get(`${baseUrl}sessions/${sessionId}.json`).then((response) => { console.log(response.data); }); /* Response: { automation_session: { name: <string>, duration: <int>, os: <string>, os_version: <string>, browser_version: <string>, browser: <string>, device: <string>, status: <string>, hashed_id: <string>, reason: <string>, build_name: <string>, project_name: <string>, logs: <string>, browser_url: <string>, public_url: <string>, appium_logs_url: <string>, video_url: <string>, browser_console_logs_url: <string>, har_logs_url: <string>, selenium_logs_url: <string> } } */ } </code></pre></div> <h4 id="erweitert_automatisierte_tests">Erweitert: Automatisierte Tests</h4> <p>Wir werden das <a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment#browserstack">Durchführen von automatisierten BrowserStack-Tests</a> im nächsten Artikel behandeln.</p></div></section><section aria-labelledby="sauce_labs"><h3 id="sauce_labs"><a href="#sauce_labs">Sauce Labs</a></h3><div class="section-content"><h4 id="einstieg_in_sauce_labs">Einstieg in Sauce Labs</h4> <p>Lassen Sie uns mit einem Sauce Labs-Test beginnen.</p> <ol> <li>Erstellen Sie ein Sauce Labs-Testkonto.</li> <li>Melden Sie sich an. Dies sollte automatisch geschehen, nachdem Sie Ihre E-Mail-Adresse bestätigt haben.</li> </ol> <h4 id="die_grundlagen_manuelle_tests_2">Die Grundlagen: Manuelle Tests</h4> <p>Das <a href="https://app.saucelabs.com/dashboard/manual" class="external" target="_blank">Sauce Labs-Dashboard</a> bietet viele verfügbare Optionen. Für den Moment, stellen Sie sicher, dass Sie auf dem Tab <em>Manuelle Tests</em> sind.</p> <ol> <li> <p>Klicken Sie auf <em>Start a new manual session</em>.</p> </li> <li> <p>Geben Sie im nächsten Bildschirm die URL der Seite ein, die Sie testen möchten (verwenden Sie z. B. <a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html" class="external" target="_blank">https://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html</a>), wählen Sie dann eine Browser-/OS-Kombination aus, die Sie mit den verschiedenen Buttons und Listen testen möchten. Es gibt sehr viel Auswahl, wie Sie sehen werden!! <img src="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing/sauce-manual-session.png" alt="select sauce manual session" width="600" height="636" loading="lazy"> </p> </li> <li> <p>Wenn Sie auf die Schaltfläche Sitzung starten klicken, wird ein Ladescreen angezeigt, der eine virtuelle Maschine mit der von Ihnen gewählten Kombination lädt.</p> </li> <li> <p>Wenn das Laden abgeschlossen ist, können Sie mit dem Remote-Test der Webseite im gewählten Browser beginnen. <img src="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing/sauce-test-running.png" alt="Sauce test running" width="800" height="390" loading="lazy"> </p> </li> <li> <p>Von hier aus können Sie das Layout so sehen, wie es im zu testenden Browser aussehen würde, die Maus bewegen und versuchen, auf Buttons zu klicken usw. Das obere Menü erlaubt Ihnen:</p> <ul> <li>Die Sitzung zu beenden</li> <li>Jemand anderem eine URL zu geben, damit er den Test aus der Ferne beobachten kann.</li> <li>Text/Notizen in eine entfernte Zwischenablage kopieren.</li> <li>Einen Screenshot aufnehmen.</li> <li>Im Vollbildmodus testen.</li> </ul> </li> </ol> <p>Sobald Sie die Sitzung beendet haben, kehren Sie zum Tab Manuelle Tests zurück, wo Sie einen Eintrag für jede der begonnenen manuellen Sitzungen sehen werden. Das Klicken auf einen dieser Einträge zeigt weitere Daten zur Sitzung an. Hier können Sie alle aufgenommenen Screenshots herunterladen, ein Video der Sitzung ansehen, Datenprotokolle anzeigen und mehr.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Das ist bereits sehr nützlich und um einiges bequemer, als all diese Emulatoren und virtuellen Maschinen selbst einrichten zu müssen.</p> </div> <h4 id="erweitert_die_sauce_labs_api">Erweitert: Die Sauce Labs API</h4> <p>Sauce Labs hat eine <a href="https://docs.saucelabs.com/dev/api/" class="external" target="_blank">restful API</a>, die es ermöglicht, programmatisch auf Details Ihres Kontos und bestehender Tests zuzugreifen und Tests mit weiteren Details zu versehen, wie ihrem Bestanden-/Nicht-bestanden-Status, der bei manuellem Testen allein nicht aufzeichnungsfähig ist. Zum Beispiel möchten Sie möglicherweise einen Ihrer eigenen Selenium-Tests remote mit Sauce Labs ausführen, um eine bestimmte Browser-/OS-Kombination zu testen, und dann die Testergebnisse an Sauce Labs zurückgeben.</p> <p>Es gibt mehrere Clients, die es Ihnen ermöglichen, Aufrufe zur API unter Verwendung Ihrer bevorzugten Umgebung zu machen, sei es PHP, Java, Node.js usw.</p> <p>Lassen Sie uns einen kurzen Blick darauf werfen, wie wir die API unter Verwendung von Node.js und <a href="https://github.com/saucelabs/node-saucelabs" class="external" target="_blank">node-saucelabs</a> aufrufen würden.</p> <ol> <li> <p>Richten Sie zunächst ein neues npm-Projekt ein, um dies auszuprobieren, wie im Abschnitt <a href="#einrichtung_von_node_und_npm">Einrichtung von Node und npm</a> beschrieben. Verwenden Sie einen anderen Verzeichnisnamen als zuvor, zum Beispiel <code>sauce-test</code>.</p> </li> <li> <p>Installieren Sie den Node Sauce Labs-Wrapper mit folgendem Befehl:</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>npm install saucelabs </code></pre></div> </li> <li> <p>Erstellen Sie eine neue Datei im Projektstammverzeichnis mit dem Namen <code>call_sauce.js</code>. Gib ihr folgenden Inhalt:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const SauceLabs = require("saucelabs").default; (async () => { const myAccount = new SauceLabs({ username: "your-sauce-username", password: "your-sauce-api-key", }); // Get full WebDriver URL from the client depending on region: console.log(myAccount.webdriverEndpoint); // Get job details of last run job const jobs = await myAccount.listJobs("your-sauce-username", { limit: 1, full: true, }); console.log(jobs); })(); </code></pre></div> </li> <li> <p>Sie müssen Ihren Sauce Labs-Benutzernamen und API-Schlüssel an den angegebenen Stellen ausfüllen. Diese können von Ihrer <a href="https://app.saucelabs.com/user-settings" class="external" target="_blank">User Settings</a> Seite abgerufen werden. Füllen Sie diese jetzt aus.</p> </li> <li> <p>Stellen Sie sicher, dass alles gespeichert ist, und führen Sie Ihre Datei so aus:</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>node call_sauce </code></pre></div> </li> </ol> <h4 id="erweitert_automatisierte_tests_2">Erweitert: Automatisierte Tests</h4> <p>Wir werden das eigentliche Ausführen automatisierter Sauce Labs-Tests im nächsten Artikel behandeln.</p></div></section><section aria-labelledby="testingbot"><h3 id="testingbot"><a href="#testingbot">TestingBot</a></h3><div class="section-content"><h4 id="einstieg_in_testingbot">Einstieg in TestingBot</h4> <p>Lassen Sie uns mit einem TestingBot-Test beginnen.</p> <ol> <li>Erstellen Sie ein <a href="https://testingbot.com/users/sign_up" class="external" target="_blank">TestingBot-Testkonto</a>.</li> <li>Melden Sie sich an. Dies sollte automatisch nach Bestätigung Ihrer E-Mail-Adresse geschehen.</li> </ol> <h4 id="die_grundlagen_manuelle_tests_3">Die Grundlagen: Manuelle Tests</h4> <p>Das <a href="https://testingbot.com/members" class="external" target="_blank">TestingBot-Dashboard</a> listet die verschiedenen Optionen auf, aus denen Sie wählen können. Stellen Sie vorerst sicher, dass Sie auf dem Tab <em>Live Web Testing</em> sind.</p> <ol> <li> <p>Geben Sie die URL der Seite ein, die Sie testen möchten.</p> </li> <li> <p> Wählen Sie die Browser-/OS-Kombination aus, die Sie testen möchten, indem Sie die Kombination im Raster auswählen. <img src="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing/screen_shot_2019-04-19_at_14.55.33.png" alt="Testauswahl" width="1159" height="586" loading="lazy"> </p> </li> <li> <p>Wenn Sie auf <em>Start Browser</em> klicken, wird ein Ladescreen angezeigt, der eine virtuelle Maschine mit der von Ihnen gewählten Kombination lädt.</p> </li> <li> <p>Sobald das Laden abgeschlossen ist, können Sie mit dem Remote-Test der Webseite im gewählten Browser beginnen.</p> </li> <li> <p>Von hier aus können Sie das Layout so sehen, wie es im zu testenden Browser aussehen würde, die Maus bewegen und versuchen, auf Buttons zu klicken usw. Das Seitenmenü erlaubt Ihnen:</p> <ul> <li>Die Sitzung zu beenden</li> <li>Die Bildschirmauflösung zu ändern</li> <li>Text/Notizen in eine entfernte Zwischenablage zu kopieren</li> <li>Screenshots zu machen, zu bearbeiten und herunterzuladen</li> <li>Im Vollbildmodus testen.</li> </ul> </li> </ol> <p>Sobald Sie die Sitzung beendet haben, kehren Sie zur Seite <em>Live Web Testing</em> zurück, wo Sie einen Eintrag für jede der begonnenen manuellen Sitzungen sehen werden. Das Klicken auf einen dieser Einträge zeigt weitere Daten zur Sitzung an. Hier können Sie alle aufgenommenen Screenshots herunterladen, ein Video des Tests ansehen und Sitzungsprotokolle einsehen.</p> <h4 id="erweitert_die_testingbot_api">Erweitert: Die TestingBot API</h4> <p>TestingBot hat eine <a href="https://testingbot.com/support/api" class="external" target="_blank">restful API</a>, die es ermöglicht, programmatisch auf Details Ihres Kontos und bestehender Tests zuzugreifen und Tests mit weiteren Details wie dem Bestanden-/Nicht-bestanden-Status zu versehen, der bei manuellem Testen allein nicht aufzeichnungsfähig ist.</p> <p>TestingBot hat mehrere API-Clients, die Sie verwenden können, um mit der API zu interagieren, einschließlich Clients für NodeJS, Python, Ruby, Java und PHP.</p> <p>Unten finden Sie ein Beispiel, wie Sie mit dem NodeJS-Client <a href="https://www.npmjs.com/package/testingbot-api" class="external" target="_blank">testingbot-api</a> mit der TestingBot-API interagieren.</p> <ol> <li> <p>Richten Sie zunächst ein neues npm-Projekt ein, um dies auszuprobieren, wie im Abschnitt <a href="#einrichtung_von_node_und_npm">Einrichtung von Node und npm</a> beschrieben. Verwenden Sie einen anderen Verzeichnisnamen als zuvor, zum Beispiel <code>tb-test</code>.</p> </li> <li> <p>Installieren Sie den Node TestingBot-Wrapper mit dem folgenden Befehl:</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>npm install testingbot-api </code></pre></div> </li> <li> <p>Erstellen Sie eine neue Datei im Projektstammverzeichnis namens <code>tb.js</code>. Gib ihr den folgenden Inhalt:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const TestingBot = require("testingbot-api"); let tb = new TestingBot({ api_key: "your-tb-key", api_secret: "your-tb-secret", }); tb.getTests(function (err, tests) { console.log(tests); }); </code></pre></div> </li> <li> <p>Sie müssen Ihren TestingBot-Schlüssel und Ihr Geheimnis an den angegebenen Stellen ausfüllen. Diese finden Sie im <a href="https://testingbot.com/members/user/edit" class="external" target="_blank">TestingBot-Dashboard</a>.</p> </li> <li> <p>Stellen Sie sicher, dass alles gespeichert ist, und führen Sie die Datei aus:</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>node tb.js </code></pre></div> </li> </ol> <h4 id="erweitert_automatisierte_tests_3">Erweitert: Automatisierte Tests</h4> <p>Wir werden das eigentliche Ausführen automatisierter TestingBot-Tests im nächsten Artikel behandeln.</p></div></section><section aria-labelledby="zusammenfassung"><h2 id="zusammenfassung"><a href="#zusammenfassung">Zusammenfassung</a></h2><div class="section-content"><p>Das war eine ziemliche Reise, aber ich bin sicher, Sie können anfangen die Vorteile der Verwendung von Automatisierungstools zu sehen, um einen Teil der Mühen beim Testen zu übernehmen.</p> <p>Im nächsten Artikel werden wir uns ansehen, wie wir unser eigenes lokales Automatisierungssystem mit Selenium einrichten und wie man dies mit Diensten wie Sauce Labs, BrowserStack und TestingBot kombiniert.</p><ul class="prev-next"> <li><a class="button secondary" href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection"><span class="button-wrap"> Zurück </span></a></li> <li><a class="button secondary" href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing"><span class="button-wrap"> Übersicht: Cross-Browser-Testing</span></a></li> <li><a class="button secondary" href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment"><span class="button-wrap"> Weiter </span></a></li> </ul></div></section></article><aside class="article-footer"><div class="article-footer-inner"><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" width="162" height="162" viewBox="0 0 162 162" fill="none" role="none"><mask id="b" fill="#fff"><path d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z"></path></mask><path stroke="url(#a)" stroke-dasharray="6, 6" stroke-width="2" d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z" mask="url(#b)" style="stroke:url(#a)" transform="translate(-63.992 -25.587)"></path><ellipse cx="8.066" cy="111.597" fill="var(--background-tertiary)" rx="53.677" ry="53.699" transform="matrix(.71707 -.697 .7243 .6895 0 0)"></ellipse><g clip-path="url(#c)" transform="translate(-63.992 -25.587)"><path fill="#9abff5" d="m144.256 137.379 32.906 12.434a4.41 4.41 0 0 1 2.559 5.667l-9.326 24.679a4.41 4.41 0 0 1-5.667 2.559l-8.226-3.108-2.332 6.17c-.466 1.233-.375 1.883-1.609 1.417l-2.253-.527c-.411-.155-.95-.594-1.206-1.161l-4.734-10.484-12.545-4.741a4.41 4.41 0 0 1-2.559-5.667l9.325-24.679a4.41 4.41 0 0 1 5.667-2.559m9.961 29.617 8.227 3.108 3.264-8.638-.498-6.768-4.113-1.555.548 7.258-4.319-1.632zm-12.339-4.663 8.226 3.108 3.264-8.637-.498-6.769-4.113-1.554.548 7.257-4.319-1.632z"></path></g><g clip-path="url(#d)" transform="translate(-63.992 -25.587)"><path fill="#81b0f3" d="M135.35 60.136 86.67 41.654c-3.346-1.27-7.124.428-8.394 3.775L64.414 81.938c-1.27 3.347.428 7.125 3.774 8.395l12.17 4.62-3.465 9.128c-.693 1.826-1.432 2.457.394 3.15l3.014 1.625c.609.231 1.637.274 2.477-.104l15.53-6.983 18.56 7.047c3.346 1.27 7.124-.428 8.395-3.775l13.862-36.51c1.27-3.346-.428-7.124-3.775-8.395M95.261 83.207l-12.17-4.62 4.852-12.779 7.19-7.017 6.085 2.31-7.725 7.51 6.389 2.426zm18.255 6.93-12.17-4.62 4.852-12.778 7.189-7.017 6.085 2.31-7.725 7.51 6.39 2.426z"></path></g><defs><clipPath id="c"><path fill="#fff" d="m198.638 146.586-65.056-24.583-24.583 65.057 65.056 24.582z"></path></clipPath><clipPath id="d"><path fill="#fff" d="m66.438 14.055 96.242 36.54-36.54 96.243-96.243-36.54z"></path></clipPath><linearGradient id="a" x1="97.203" x2="199.995" y1="47.04" y2="152.793" gradientUnits="userSpaceOnUse"><stop stop-color="#086DFC"></stop><stop offset="0.246" stop-color="#2C81FA"></stop><stop offset="0.516" stop-color="#5497F8"></stop><stop offset="0.821" stop-color="#80B0F6"></stop><stop offset="1" stop-color="#9ABFF5"></stop></linearGradient></defs></svg></div><h2>MDN-Feedback-Box</h2><fieldset class="feedback"><label>War diese Übersetzung hilfreich?</label><div class="button-container"><button type="button" class="button primary has-icon yes"><span class="button-wrap"><span class="icon icon-thumbs-up "></span>Ja</span></button><button type="button" class="button primary has-icon no"><span class="button-wrap"><span class="icon icon-thumbs-down "></span>Nein</span></button></div></fieldset><p class="last-modified-date">Diese Seite wurde automatisch aus dem Englischen übersetzt.</p><div id="on-github" class="on-github"><a href="https://github.com/mdn/translated-content-de/blob/main/files/de/learn/tools_and_testing/cross_browser_testing/automated_testing/index.md?plain=1" title="Folder: de/learn/tools_and_testing/cross_browser_testing/automated_testing (Opens in a new tab)" target="_blank" rel="noopener noreferrer">Übersetzung auf GitHub anzeigen</a> • <a href="https://github.com/mdn/translated-content-de/issues/new?template=page-report-de.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fde%2Fdocs%2FLearn%2FTools_and_testing%2FCross_browser_testing%2FAutomated_testing&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60de%2Flearn%2Ftools_and_testing%2Fcross_browser_testing%2Fautomated_testing%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fde%2Fdocs%2FLearn%2FTools_and_testing%2FCross_browser_testing%2FAutomated_testing%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content-de%2Fblob%2Fmain%2Ffiles%2Fde%2Flearn%2Ftools_and_testing%2Fcross_browser_testing%2Fautomated_testing%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content-de%2Fcommit%2Fnull%0A*+Document+last+modified%3A+*date+not+known*%0A%0A%3C%2Fdetails%3E" title="This will take you to GitHub to file a new issue." target="_blank" rel="noopener noreferrer">Fehler mit dieser Übersetzung melden</a></div></div></aside></main></div></div><footer id="nav-footer" class="page-footer"><div class="page-footer-grid"><div class="page-footer-logo-col"><a href="/" class="mdn-footer-logo" aria-label="MDN homepage"><svg width="48" height="17" viewBox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mdn-footer-logo-svg">MDN logo</title><path d="M20.04 16.512H15.504V10.416C15.504 9.488 15.344 8.824 15.024 8.424C14.72 8.024 14.264 7.824 13.656 7.824C12.92 7.824 12.384 8.064 12.048 8.544C11.728 9.024 11.568 9.64 11.568 10.392V14.184H13.008V16.512H8.472V10.416C8.472 9.488 8.312 8.824 7.992 8.424C7.688 8.024 7.232 7.824 6.624 7.824C5.872 7.824 5.336 8.064 5.016 8.544C4.696 9.024 4.536 9.64 4.536 10.392V14.184H6.6V16.512H0V14.184H1.44V8.04H0.024V5.688H4.536V7.32C5.224 6.088 6.32 5.472 7.824 5.472C8.608 5.472 9.328 5.664 9.984 6.048C10.64 6.432 11.096 7.016 11.352 7.8C11.992 6.248 13.168 5.472 14.88 5.472C15.856 5.472 16.72 5.776 17.472 6.384C18.224 6.992 18.6 7.936 18.6 9.216V14.184H20.04V16.512Z" fill="currentColor"></path><path d="M33.6714 16.512H29.1354V14.496C28.8314 15.12 28.3834 15.656 27.7914 16.104C27.1994 16.536 26.4154 16.752 25.4394 16.752C24.0154 16.752 22.8954 16.264 22.0794 15.288C21.2634 14.312 20.8554 12.984 20.8554 11.304C20.8554 9.688 21.2554 8.312 22.0554 7.176C22.8554 6.04 24.0634 5.472 25.6794 5.472C26.5594 5.472 27.2794 5.648 27.8394 6C28.3994 6.352 28.8314 6.8 29.1354 7.344V2.352H26.9754V0H32.2314V14.184H33.6714V16.512ZM29.1354 11.04V10.776C29.1354 9.88 28.8954 9.184 28.4154 8.688C27.9514 8.176 27.3674 7.92 26.6634 7.92C25.9754 7.92 25.3674 8.176 24.8394 8.688C24.3274 9.2 24.0714 10.008 24.0714 11.112C24.0714 12.152 24.3114 12.944 24.7914 13.488C25.2714 14.032 25.8394 14.304 26.4954 14.304C27.3114 14.304 27.9514 13.96 28.4154 13.272C28.8954 12.584 29.1354 11.84 29.1354 11.04Z" fill="currentColor"></path><path d="M47.9589 16.512H41.9829V14.184H43.4229V10.416C43.4229 9.488 43.2629 8.824 42.9429 8.424C42.6389 8.024 42.1829 7.824 41.5749 7.824C40.8389 7.824 40.2709 8.056 39.8709 8.52C39.4709 8.968 39.2629 9.56 39.2469 10.296V14.184H40.6869V16.512H34.7109V14.184H36.1509V8.04H34.5909V5.688H39.2469V7.344C39.9669 6.096 41.1269 5.472 42.7269 5.472C43.7509 5.472 44.6389 5.776 45.3909 6.384C46.1429 6.992 46.5189 7.936 46.5189 9.216V14.184H47.9589V16.512Z" fill="currentColor"></path></svg></a><p>Your blueprint for a better internet.</p><ul class="social-icons"><li><a href="https://mozilla.social/@mdn" target="_blank" rel="me noopener noreferrer"><span class="icon icon-mastodon"></span><span class="visually-hidden">MDN on Mastodon</span></a></li><li><a href="https://twitter.com/mozdevnet" target="_blank" rel="noopener noreferrer"><span class="icon icon-twitter-x"></span><span class="visually-hidden">MDN on X (formerly Twitter)</span></a></li><li><a href="https://github.com/mdn/" target="_blank" rel="noopener noreferrer"><span class="icon icon-github-mark-small"></span><span class="visually-hidden">MDN on GitHub</span></a></li><li><a href="/en-US/blog/rss.xml" target="_blank"><span class="icon icon-feed"></span><span class="visually-hidden">MDN Blog RSS Feed</span></a></li></ul></div><div class="page-footer-nav-col-1"><h2 class="footer-nav-heading">MDN</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a href="/en-US/about">About</a></li><li class="footer-nav-item"><a href="/en-US/blog/">Blog</a></li><li class="footer-nav-item"><a href="https://www.mozilla.org/en-US/careers/listings/?team=ProdOps" target="_blank" rel="noopener noreferrer">Careers</a></li><li class="footer-nav-item"><a href="/en-US/advertising">Advertise with us</a></li></ul></div><div class="page-footer-nav-col-2"><h2 class="footer-nav-heading">Support</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="https://support.mozilla.org/products/mdn-plus">Product help</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/de/docs/MDN/Community/Issues">Report an issue</a></li></ul></div><div class="page-footer-nav-col-3"><h2 class="footer-nav-heading">Our communities</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/community">MDN Community</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="https://discourse.mozilla.org/c/mdn/236" target="_blank" rel="noopener noreferrer">MDN Forum</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/discord" target="_blank" rel="noopener noreferrer">MDN Chat</a></li></ul></div><div class="page-footer-nav-col-4"><h2 class="footer-nav-heading">Developers</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/de/docs/Web">Web Technologies</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/de/docs/Learn">Learn Web Development</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/de/plus">MDN Plus</a></li><li class="footer-nav-item"><a href="https://hacks.mozilla.org/" target="_blank" rel="noopener noreferrer">Hacks Blog</a></li></ul></div><div class="page-footer-moz"><a href="https://www.mozilla.org/" class="footer-moz-logo-link" target="_blank" rel="noopener noreferrer"><svg width="112" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mozilla-footer-logo-svg">Mozilla logo</title><path d="M41.753 14.218c-2.048 0-3.324 1.522-3.324 4.157 0 2.423 1.119 4.286 3.29 4.286 2.082 0 3.447-1.678 3.447-4.347 0-2.826-1.522-4.096-3.413-4.096Zm54.89 7.044c0 .901.437 1.618 1.645 1.618 1.427 0 2.949-1.024 3.044-3.352-.649-.095-1.365-.185-2.02-.185-1.426-.005-2.668.397-2.668 1.92Z" fill="currentColor"></path><path d="M0 0v32h111.908V0H0Zm32.56 25.426h-5.87v-7.884c0-2.423-.806-3.352-2.39-3.352-1.924 0-2.702 1.365-2.702 3.324v4.868h1.864v3.044h-5.864v-7.884c0-2.423-.806-3.352-2.39-3.352-1.924 0-2.702 1.365-2.702 3.324v4.868h2.669v3.044H6.642v-3.044h1.863v-7.918H6.642V11.42h5.864v2.11c.839-1.489 2.3-2.39 4.252-2.39 2.02 0 3.878.963 4.566 3.01.778-1.862 2.361-3.01 4.566-3.01 2.512 0 4.812 1.522 4.812 4.84v6.402h1.863v3.044h-.005Zm9.036.307c-4.314 0-7.296-2.635-7.296-7.106 0-4.096 2.484-7.481 7.514-7.481s7.481 3.38 7.481 7.29c0 4.472-3.228 7.297-7.699 7.297Zm22.578-.307H51.942l-.403-2.11 7.7-8.846h-4.376l-.621 2.17-2.888-.313.498-4.907h12.294l.313 2.11-7.767 8.852h4.533l.654-2.172 3.167.308-.872 4.908Zm7.99 0h-4.191v-5.03h4.19v5.03Zm0-8.976h-4.191v-5.03h4.19v5.03Zm2.618 8.976 6.054-21.358h3.945l-6.054 21.358h-3.945Zm8.136 0 6.048-21.358h3.945l-6.054 21.358h-3.939Zm21.486.307c-1.863 0-2.887-1.085-3.072-2.792-.805 1.427-2.232 2.792-4.498 2.792-2.02 0-4.314-1.085-4.314-4.006 0-3.447 3.323-4.253 6.518-4.253.778 0 1.584.034 2.3.124v-.465c0-1.427-.034-3.133-2.3-3.133-.84 0-1.488.061-2.143.402l-.453 1.578-3.195-.34.549-3.224c2.45-.996 3.692-1.27 5.992-1.27 3.01 0 5.556 1.55 5.556 4.75v6.083c0 .805.314 1.085.963 1.085.184 0 .375-.034.587-.095l.034 2.11a5.432 5.432 0 0 1-2.524.654Z" fill="currentColor"></path></svg></a><ul class="footer-moz-list"><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Website Privacy Notice</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/#cookies" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Cookies</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/legal/terms/mozilla" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Legal</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/governance/policies/participation/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Community Participation Guidelines</a></li></ul></div><div class="page-footer-legal"><p id="license" class="page-footer-legal-text">Visit <a href="https://www.mozilla.org" target="_blank" rel="noopener noreferrer">Mozilla Corporation’s</a> not-for-profit parent, the <a target="_blank" rel="noopener noreferrer" href="https://foundation.mozilla.org/">Mozilla Foundation</a>.<br/>Portions of this content are ©1998–2024 by individual mozilla.org contributors. Content available under <a href="/de/docs/MDN/Writing_guidelines/Attrib_copyright_license">a Creative Commons license</a>.</p></div></div></footer></div><script type="application/json" id="hydration">{"url":"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing","doc":{"isMarkdown":true,"isTranslated":true,"isActive":true,"flaws":{},"title":"Einführung in automatisiertes Testen","mdn_url":"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing","locale":"de","native":"Deutsch","sidebarHTML":"<ol><li class=\"section\"><a href=\"/de/docs/Learn/Getting_started_with_the_web\">Komplette Anfänger beginnen hier!</a></li><li><details><summary>Erste Schritte mit dem Web</summary><ol><li><a href=\"/de/docs/Learn/Getting_started_with_the_web\">Einführung ins Web</a></li><li><a href=\"/de/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">Installation von grundlegender Software</a></li><li><a href=\"/de/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like\">Wie wird Ihre Website aussehen?</a></li><li><a href=\"/de/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">Umgang mit Dateien</a></li><li><a href=\"/de/docs/Learn/Getting_started_with_the_web/HTML_basics\">HTML-Grundlagen</a></li><li><a href=\"/de/docs/Learn/Getting_started_with_the_web/CSS_basics\">CSS-Grundlagen</a></li><li><a href=\"/de/docs/Learn/Getting_started_with_the_web/JavaScript_basics\">JavaScript-Grundlagen</a></li><li><a href=\"/de/docs/Learn/Getting_started_with_the_web/Publishing_your_website\">Veröffentlichung Ihrer Website</a></li><li><a href=\"/de/docs/Learn/Getting_started_with_the_web/How_the_Web_works\">Wie das Web funktioniert</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/HTML\">HTML — Strukturierung des Webs</a></li><li><details><summary>Einführung in HTML</summary><ol><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML\">Einführung in HTML</a></li><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started\">Erste Schritte mit HTML</a></li><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML\">Was ist im Kopfbereich? Metadaten in HTML</a></li><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals\">Grundlagen des HTML-Textes</a></li><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks\">Erstellen von Hyperlinks</a></li><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting\">Erweiterte Textformatierung</a></li><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure\">Struktur eines Dokuments und einer Website</a></li><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML\">Debugging HTML</a></li><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter\">Markierung eines Briefes</a></li><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content\">Die Strukturierung einer Seite mit Inhalt</a></li></ol></details></li><li><details><summary>Multimedia und Einbettung</summary><ol><li><a href=\"/de/docs/Learn/HTML/Multimedia_and_embedding\">Multimedia und Einbettung</a></li><li><a href=\"/de/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML\">Bilder in HTML</a></li><li><a href=\"/de/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content\">Video- und Audioinhalte</a></li><li><a href=\"/de/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies\">Von Objekt zu iframe — andere Einbettungstechnologien</a></li><li><a href=\"/de/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web\">Vektorgrafiken zum Web hinzufügen</a></li><li><a href=\"/de/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images\">Responsive Images</a></li><li><a href=\"/de/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page\">Mozilla Splash-Seite</a></li></ol></details></li><li><details><summary>HTML-Tabellen</summary><ol><li><a href=\"/de/docs/Learn/HTML/Tables\">HTML-Tabellen</a></li><li><a href=\"/de/docs/Learn/HTML/Tables/Basics\">HTML Table Grundlagen</a></li><li><a href=\"/de/docs/Learn/HTML/Tables/Advanced\">Erweiterte Funktionen und Barrierefreiheit von HTML-Tabellen</a></li><li><a href=\"/de/docs/Learn/HTML/Tables/Structuring_planet_data\">Strukturierung von Planeten-Daten</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/CSS\">CSS — Gestaltung des Webs</a></li><li><details><summary>CSS erste Schritte</summary><ol><li><a href=\"/de/docs/Learn/CSS/First_steps\">Erste Schritte mit CSS</a></li><li><a href=\"/de/docs/Learn/CSS/First_steps/What_is_CSS\">Was ist CSS?</a></li><li><a href=\"/de/docs/Learn/CSS/First_steps/Getting_started\">Einstieg in CSS</a></li><li><a href=\"/de/docs/Learn/CSS/First_steps/How_CSS_is_structured\">Wie CSS strukturiert ist</a></li><li><a href=\"/de/docs/Learn/CSS/First_steps/How_CSS_works\">Wie CSS funktioniert</a></li><li><a href=\"/de/docs/Learn/CSS/First_steps/Styling_a_biography_page\">Eine Biografieseite stylen</a></li></ol></details></li><li><details><summary>CSS-Bausteine</summary><ol><li><a href=\"/de/docs/Learn/CSS/Building_blocks\">CSS-Grundbausteine</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Selectors\">CSS-Selektoren</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors\">Typ-, Klassen- und ID-Selektoren</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors\">Attributselektoren</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements\">Pseudo-Klassen und Pseudo-Elemente</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Selectors/Combinators\">Kombinatoren</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance\">Kaskade, Spezifität und Vererbung</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Cascade_layers\">Kaskadenschichten</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/The_box_model\">Das Boxmodell</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders\">Hintergründe und Rahmen</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Handling_different_text_directions\">Umgang mit unterschiedlichen Textausrichtungen</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Overflowing_content\">Überlaufender Inhalt</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Values_and_units\">CSS-Werte und Einheiten</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS\">Größe von Elementen in CSS</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Images_media_form_elements\">Bilder, Medien und Formularelemente</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Styling_tables\">Tabellen stylen</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Advanced_styling_effects\">Erweiterte Styling-Effekte</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Debugging_CSS\">Debugging CSS</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Organizing\">Organisieren Ihres CSS</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension\">Grundlegendes CSS-Verständnis</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper\">Erstellen von stilvollem Briefpapier</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/A_cool_looking_box\">Eine cool aussehende Box</a></li></ol></details></li><li><details><summary>Textgestaltung</summary><ol><li><a href=\"/de/docs/Learn/CSS/Styling_text\">CSS Textgestaltung</a></li><li><a href=\"/de/docs/Learn/CSS/Styling_text/Fundamentals\">Grundlegende Text- und Schriftgestaltung</a></li><li><a href=\"/de/docs/Learn/CSS/Styling_text/Styling_lists\">Listen stilisieren</a></li><li><a href=\"/de/docs/Learn/CSS/Styling_text/Styling_links\">Styling von Links</a></li><li><a href=\"/de/docs/Learn/CSS/Styling_text/Web_fonts\">Web-Fonts</a></li><li><a href=\"/de/docs/Learn/CSS/Styling_text/Typesetting_a_homepage\">Setzen einer Community-Schul-Startseite</a></li></ol></details></li><li><details><summary>CSS-Layout</summary><ol><li><a href=\"/de/docs/Learn/CSS/CSS_layout\">CSS-Layout</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Introduction\">Einführung in CSS Layout</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Normal_Flow\">Normaler Fluss</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Flexbox\">Flexbox</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Grids\">Raster</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Floats\">Floats</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Positioning\">Positioning</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Multiple-column_Layout\">Mehrspaltiges Layout</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Responsive_Design\">Responsives Design</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Media_queries\">Einsteigerleitfaden für Media Queries</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods\">Legacy-Layout-Methoden</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers\">Unterstützung älterer Browser</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension\">Grundlegendes Verständnis von Layouts</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/JavaScript\">JavaScript — Dynamisches clientseitiges Skripting</a></li><li><details><summary>JavaScript erste Schritte</summary><ol><li><a href=\"/de/docs/Learn/JavaScript/First_steps\">JavaScript erste Schritte</a></li><li><a href=\"/de/docs/Learn/JavaScript/First_steps/What_is_JavaScript\">Was ist JavaScript?</a></li><li><a href=\"/de/docs/Learn/JavaScript/First_steps/A_first_splash\">Ein erster Sprung in JavaScript</a></li><li><a href=\"/de/docs/Learn/JavaScript/First_steps/What_went_wrong\">Was ist schiefgelaufen? JavaScript-Fehlerbehebung</a></li><li><a href=\"/de/docs/Learn/JavaScript/First_steps/Variables\">Speichern der benötigten Informationen — Variablen</a></li><li><a href=\"/de/docs/Learn/JavaScript/First_steps/Math\">Grundlegende Mathematik in JavaScript – Zahlen und Operatoren</a></li><li><a href=\"/de/docs/Learn/JavaScript/First_steps/Strings\">Umgang mit Text — Strings in JavaScript</a></li><li><a href=\"/de/docs/Learn/JavaScript/First_steps/Useful_string_methods\">Nützliche String-Methoden</a></li><li><a href=\"/de/docs/Learn/JavaScript/First_steps/Arrays\">Arrays</a></li><li><a href=\"/de/docs/Learn/JavaScript/First_steps/Silly_story_generator\">Silly Story Generator</a></li></ol></details></li><li><details><summary>JavaScript-Bausteine</summary><ol><li><a href=\"/de/docs/Learn/JavaScript/Building_blocks\">JavaScript-Bausteine</a></li><li><a href=\"/de/docs/Learn/JavaScript/Building_blocks/conditionals\">Entscheidungen in Ihrem Code treffen — Bedingte Anweisungen</a></li><li><a href=\"/de/docs/Learn/JavaScript/Building_blocks/Looping_code\">Schleifen-Code</a></li><li><a href=\"/de/docs/Learn/JavaScript/Building_blocks/Functions\">Funktionen — wiederverwendbare Codeblöcke</a></li><li><a href=\"/de/docs/Learn/JavaScript/Building_blocks/Build_your_own_function\">Erstellen Sie Ihre eigene Funktion</a></li><li><a href=\"/de/docs/Learn/JavaScript/Building_blocks/Return_values\">Funktionsrückgabewerte</a></li><li><a href=\"/de/docs/Learn/JavaScript/Building_blocks/Events\">Einführung in Ereignisse</a></li><li><a href=\"/de/docs/Learn/JavaScript/Building_blocks/Event_bubbling\">Event bubbling</a></li><li><a href=\"/de/docs/Learn/JavaScript/Building_blocks/Image_gallery\">Bildgalerie</a></li></ol></details></li><li><details><summary>Einführung in JavaScript-Objekte</summary><ol><li><a href=\"/de/docs/Learn/JavaScript/Objects\">Einführung in JavaScript-Objekte</a></li><li><a href=\"/de/docs/Learn/JavaScript/Objects/Basics\">JavaScript Objekt Grundlagen</a></li><li><a href=\"/de/docs/Learn/JavaScript/Objects/Object_prototypes\">Objektprototypen</a></li><li><a href=\"/de/docs/Learn/JavaScript/Objects/Object-oriented_programming\">Objektorientierte Programmierung</a></li><li><a href=\"/de/docs/Learn/JavaScript/Objects/Classes_in_JavaScript\">Klassen in JavaScript</a></li><li><a href=\"/de/docs/Learn/JavaScript/Objects/JSON\">Arbeiten mit JSON</a></li><li><a href=\"/de/docs/Learn/JavaScript/Objects/Object_building_practice\">Objekt-Baupraxis</a></li><li><a href=\"/de/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features\">Hinzufügen von Funktionen zu unserem hüpfenden Kugeln-Demo</a></li></ol></details></li><li><details><summary>Asynchrones JavaScript</summary><ol><li><a href=\"/de/docs/Learn/JavaScript/Asynchronous\">Asynchrones JavaScript</a></li><li><a href=\"/de/docs/Learn/JavaScript/Asynchronous/Introducing\">Einführung in asynchrones JavaScript</a></li><li><a href=\"/de/docs/Learn/JavaScript/Asynchronous/Promises\">Anleitung zur Verwendung von Promises</a></li><li><a href=\"/de/docs/Learn/JavaScript/Asynchronous/Implementing_a_promise-based_API\">Anleitung zur Implementierung einer Promise-basierten API</a></li><li><a href=\"/de/docs/Learn/JavaScript/Asynchronous/Introducing_workers\">Einführung in Workers</a></li><li><a href=\"/de/docs/Learn/JavaScript/Asynchronous/Sequencing_animations\">Sequenzierung von Animationen</a></li></ol></details></li><li><details><summary>Client-seitige Web-APIs</summary><ol><li><a href=\"/de/docs/Learn/JavaScript/Client-side_web_APIs\">Client-Side-Web-APIs</a></li><li><a href=\"/de/docs/Learn/JavaScript/Client-side_web_APIs/Introduction\">Einführung in Web-APIs</a></li><li><a href=\"/de/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents\">Manipulating documents</a></li><li><a href=\"/de/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data\">Abrufen von Daten vom Server</a></li><li><a href=\"/de/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs\">Third-party APIs</a></li><li><a href=\"/de/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics\">Grafiken zeichnen</a></li><li><a href=\"/de/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs\">Video- und Audio-APIs</a></li><li><a href=\"/de/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage\">Client-side storage</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/Forms\">Webformulare — Arbeiten mit Benutzerdaten</a></li><li><details><summary>Grundlagen der Webformulare</summary><ol><li><a href=\"/de/docs/Learn/Forms\">Bausteine für Webformulare</a></li><li><a href=\"/de/docs/Learn/Forms/Your_first_form\">Ihr erstes Formular</a></li><li><a href=\"/de/docs/Learn/Forms/How_to_structure_a_web_form\">Wie Sie ein Webformular strukturieren</a></li><li><a href=\"/de/docs/Learn/Forms/Basic_native_form_controls\">Basis-Native Formularelemente</a></li><li><a href=\"/de/docs/Learn/Forms/HTML5_input_types\">Die HTML5 input Typen</a></li><li><a href=\"/de/docs/Learn/Forms/Other_form_controls\">Andere Formularelemente</a></li><li><a href=\"/de/docs/Learn/Forms/Styling_web_forms\">Styling von Webformularen</a></li><li><a href=\"/de/docs/Learn/Forms/Advanced_form_styling\">Erweiterte Formular-Stilgestaltung</a></li><li><a href=\"/de/docs/Learn/Forms/UI_pseudo-classes\">UI-Pseudo-Klassen</a></li><li><a href=\"/de/docs/Learn/Forms/Form_validation\">Client-seitige Formularvalidierung</a></li><li><a href=\"/de/docs/Learn/Forms/Sending_and_retrieving_form_data\">Senden von Formulardaten</a></li></ol></details></li><li><details><summary>Erweiterte Techniken für Webformulare</summary><ol><li><a href=\"/de/docs/Learn/Forms/How_to_build_custom_form_controls\">Anleitung zur Erstellung benutzerdefinierter Formularelemente</a></li><li><a href=\"/de/docs/Learn/Forms/Sending_forms_through_JavaScript\">Versenden von Formularen über JavaScript</a></li><li><a href=\"/de/docs/Learn/Forms/Property_compatibility_table_for_form_controls\">CSS-Eigenschaftskompatibilitätstabelle für Formularelemente</a></li><li><a href=\"/de/docs/Learn/Forms/HTML_forms_in_legacy_browsers\">HTML-Formulare in älteren Browsern</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/Accessibility\">Barrierefreiheit — Das Web für alle nutzbar machen</a></li><li><details><summary>Barrierefreiheitsleitfäden</summary><ol><li><a href=\"/de/docs/Learn/Accessibility\">Barrierefreiheit</a></li><li><a href=\"/de/docs/Learn/Accessibility/What_is_accessibility\">Was ist Barrierefreiheit?</a></li><li><a href=\"/de/docs/Learn/Accessibility/HTML\">HTML: Eine gute Grundlage für Barrierefreiheit</a></li><li><a href=\"/de/docs/Learn/Accessibility/CSS_and_JavaScript\">CSS und JavaScript: Barrierefreiheits-Best Practices</a></li><li><a href=\"/de/docs/Learn/Accessibility/WAI-ARIA_basics\">Grundlagen von WAI-ARIA</a></li><li><a href=\"/de/docs/Learn/Accessibility/Multimedia\">Barrierefreie Multimedia</a></li><li><a href=\"/de/docs/Learn/Accessibility/Mobile\">Barrierefreiheit auf Mobilgeräten</a></li><li><a href=\"/de/docs/Learn/Accessibility/Accessibility_troubleshooting\">Bewertung: Barrierefreiheits-Troubleshooting</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/Performance\">Leistung — Websites schnell und reaktionsschnell machen</a></li><li><details><summary>Leitfäden zur Leistung</summary><ol><li><a href=\"/de/docs/Learn/Performance\">Webleistung</a></li><li><a href=\"/de/docs/Learn/Performance/why_web_performance\">Der 'Warum' der Web-Performance</a></li><li><a href=\"/de/docs/Learn/Performance/What_is_web_performance\">Was ist Web-Performance?</a></li><li><a href=\"/de/docs/Learn/Performance/Perceived_performance\">Wahrgenommene Leistung</a></li><li><a href=\"/de/docs/Learn/Performance/Measuring_performance\">Messung der Performance</a></li><li><a href=\"/de/docs/Learn/Performance/Multimedia\">Multimedia: Bilder</a></li><li><a href=\"/de/docs/Learn/Performance/video\">Multimedia: Video</a></li><li><a href=\"/de/docs/Learn/Performance/JavaScript\">JavaScript-Leistungsoptimierung</a></li><li><a href=\"/de/docs/Learn/Performance/HTML\">HTML-Leistungsoptimierung</a></li><li><a href=\"/de/docs/Learn/Performance/CSS\">CSS-Leistungsoptimierung</a></li><li><a href=\"/de/docs/Learn/Performance/business_case_for_performance\">Der geschäftliche Nutzen von Web-Performance</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/MathML\">MathML — Schreiben von Mathematik mit MathML</a></li><li><details><summary>MathML erste Schritte</summary><ol><li><a href=\"/de/docs/Learn/MathML/First_steps\">Erste Schritte mit MathML</a></li><li><a href=\"/de/docs/Learn/MathML/First_steps/Getting_started\">Erste Schritte mit MathML</a></li><li><a href=\"/de/docs/Learn/MathML/First_steps/Text_containers\">MathML Text-Container</a></li><li><a href=\"/de/docs/Learn/MathML/First_steps/Fractions_and_roots\">MathML-Brüche und -Wurzeln</a></li><li><a href=\"/de/docs/Learn/MathML/First_steps/Scripts\">MathML gescriptete Elemente</a></li><li><a href=\"/de/docs/Learn/MathML/First_steps/Tables\">MathML Tabellen</a></li><li><a href=\"/de/docs/Learn/MathML/First_steps/Three_famous_mathematical_formulas\">Drei berühmte mathematische Formeln</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/../Games\">Spiele — Entwicklung von Spielen für das Web</a></li><li><details><summary>Anleitungen und Tutorials</summary><ol><li><a href=\"/de/docs/Games/Introduction\">Einführung in die Spieleentwicklung für das Web</a></li><li><a href=\"/de/docs/Games/Techniques\">Techniken für die Spieleentwicklung</a></li><li><a href=\"/de/docs/Games/Tutorials\">Tutorials</a></li><li><a href=\"/de/docs/Games/Publishing_games\">Publishing Games</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/Tools_and_testing\">Werkzeuge und Tests</a></li><li><details><summary>Client-seitige Webentwicklungstools</summary><ol><li><a href=\"/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools\">Verständnis von Client-seitigen Webentwicklungstools</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview\">Übersicht über clientseitige Werkzeuge</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">Crashkurs zur Kommandozeile</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management\">Grundlagen des Paketmanagements</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain\">Einführung in eine vollständige Toolchain</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment\">Bereitstellung unserer App</a></li></ol></details></li><li><details><summary>Einführung in client-seitige Frameworks</summary><ol><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction\">Einführung in client-seitige Frameworks</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features\">Hauptmerkmale von Frameworks</a></li></ol></details></li><li><details><summary>React</summary><ol><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started\">Erste Schritte mit React</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning\">Beginn unserer React-Task-Liste</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components\">Komponentisieren unserer React-App</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state\">React-Interaktivität: Ereignisse und Status</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering\">React Interaktivität: Bearbeiten, Filtern, bedingtes Rendering</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility\">Accessibility in React</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources\">React-Ressourcen</a></li></ol></details></li><li><details><summary>Ember</summary><ol><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started\">Einstieg in Ember</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization\">Ember App-Struktur und Komponentisierung</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state\">Ember-Interaktivität: Events, Klassen und Zustand</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer\">Ember Interaktivität: Footer-Funktionalität, bedingtes Rendering</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing\">Routing in Ember</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources\">Ember-Ressourcen und Fehlerbehebung</a></li></ol></details></li><li><details><summary>Vue</summary><ol><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started\">Einstieg in Vue</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component\">Erstellen unserer ersten Vue-Komponente</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists\">Rendering einer Liste von Vue-Komponenten</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models\">Hinzufügen eines neuen Todo-Formulars: Vue-Ereignisse, Methoden und Modelle</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling\">Styling von Vue-Komponenten mit CSS</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties\">Verwendung von Vue computed properties</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering\">Vue bedingte Darstellung: Bearbeitung bestehender Todos</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management\">Vue-Refs und Lifecycle-Methoden zur Fokusverwaltung</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources\">Vue-Ressourcen</a></li></ol></details></li><li><details><summary>Svelte</summary><ol><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started\">Erste Schritte mit Svelte</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning\">Starten unserer Svelte-Tasklisten-App</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props\">Dynamisches Verhalten in Svelte: Arbeiten mit Variablen und Props</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components\">Komponentisierung unserer Svelte-App</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility\">Fortgeschrittenes Svelte: Reaktivität, Lebenszyklus, Barrierefreiheit</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores\">Arbeiten mit Svelte Stores</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript\">TypeScript-Unterstützung in Svelte</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next\">Bereitstellung und nächste Schritte</a></li></ol></details></li><li><details><summary>Angular</summary><ol><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started\">Erste Schritte mit Angular</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning\">Anfang unserer Angular-To-Do-Liste-App</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling\">Styling unserer Angular-Anwendung</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component\">Erstellen einer Item-Komponente</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering\">Filtern unserer To-Do-Elemente</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building\">Building Angular applications and further resources</a></li></ol></details></li><li><details><summary>Git und GitHub</summary><ol><li><a href=\"/de/docs/Learn/Tools_and_testing/GitHub\">Git und GitHub</a></li></ol></details></li><li><details open=\"\"><summary>Cross-Browser-Tests</summary><ol><li><a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing\">Cross-Browser-Testing</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction\">Einführung in das Cross-Browser-Testing</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies\">Strategien zur Durchführung von Tests</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS\">Umgang mit häufigen HTML- und CSS-Problemen</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript\">Umgang mit häufigen JavaScript-Problemen</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility\">Umgang mit häufigen Problemen der Barrierefreiheit</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection\">Implementierung von Feature-Erkennung</a></li><li><em><a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing\" aria-current=\"page\">Einführung in automatisiertes Testen</a></em></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment\">Einrichten Ihrer eigenen Testautomatisierungsumgebung</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/Server-side\">Server-seitige Webprogrammierung</a></li><li><details><summary>Erste Schritte</summary><ol><li><a href=\"/de/docs/Learn/Server-side/First_steps\">Server-seitige Website-Programmierung: Erste Schritte</a></li><li><a href=\"/de/docs/Learn/Server-side/First_steps/Introduction\">Einführung in die serverseitige Programmierung</a></li><li><a href=\"/de/docs/Learn/Server-side/First_steps/Client-Server_overview\">Überblick über Client-Server</a></li><li><a href=\"/de/docs/Learn/Server-side/First_steps/Web_frameworks\">Serverseitige Web-Frameworks</a></li><li><a href=\"/de/docs/Learn/Server-side/First_steps/Website_security\">Website-Sicherheit</a></li></ol></details></li><li><details><summary>Django Web-Framework (Python)</summary><ol><li><a href=\"/de/docs/Learn/Server-side/Django\">Django Web Framework (Python)</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Introduction\">Einführung in Django</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/development_environment\">Einrichten einer Django-Entwicklungsumgebung</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Tutorial_local_library_website\">Django-Tutorial: Die Local Library Website</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/skeleton_website\">Django-Tutorial Teil 2: Erstellung einer Skelett-Website</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Models\">Django-Tutorial Teil 3: Verwenden von Modellen</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Admin_site\">Django Tutorial Teil 4: Django Admin-Seite</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Home_page\">Django-Tutorial Teil 5: Erstellen unserer Startseite</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Generic_views\">Django Tutorial Teil 6: Generische Listen- und Detailansichten</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Sessions\">Django-Tutorial Teil 7: Sessions-Framework</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Authentication\">Django-Tutorial Teil 8: Benutzer-Authentifizierung und Berechtigungen</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Forms\">Django Tutorial Teil 9: Arbeiten mit Formularen</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Testing\">Django Tutorial Teil 10: Testen einer Django-Webanwendung</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Deployment\">Django-Tutorial Teil 11: Django in Produktion bereitstellen</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/web_application_security\">Django-Webanwendungssicherheit</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/django_assessment_blog\">Bewertung: DIY Django Mini-Blog</a></li></ol></details></li><li><details><summary>Express Web-Framework (Node.js/JavaScript)</summary><ol><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs\">Express-Webframework (Node.js/JavaScript)</a></li><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs/Introduction\">Einführung in Express/Node</a></li><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs/development_environment\">Einrichtung einer Node-Entwicklungsumgebung</a></li><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website\">Express-Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs/skeleton_website\">Express Tutorial Teil 2: Erstellung einer Grundstruktur für eine Website</a></li><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs/mongoose\">Express Tutorial Teil 3: Verwendung einer Datenbank (mit Mongoose)</a></li><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs/routes\">Express Tutorial Teil 4: Routen und Controller</a></li><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs/Displaying_data\">Express Tutorial Teil 5: Bibliotheksdaten anzeigen</a></li><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs/forms\">Express Tutorial Teil 6: Arbeiten mit Formularen</a></li><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs/deployment\">Express-Tutorial Teil 7: Bereitstellung für die Produktion</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/Common_questions\">Weitere Ressourcen</a></li><li><details><summary>Häufige Fragen</summary><ol><li><a href=\"/de/docs/Learn/Common_questions\">Häufige Fragen</a></li><li><a href=\"/de/docs/Learn/HTML/Howto\">HTML verwenden, um häufige Probleme zu lösen</a></li><li><a href=\"/de/docs/Learn/CSS/Howto\">CSS verwenden, um häufige Probleme zu lösen</a></li><li><a href=\"/de/docs/Learn/JavaScript/Howto\">Lösen Sie häufige Probleme in Ihrem JavaScript-Code</a></li><li><a href=\"/de/docs/Learn/Common_questions/Web_mechanics\">Web-Mechanik</a></li><li><a href=\"/de/docs/Learn/Common_questions/Tools_and_setup\">Tools und Einrichtung</a></li><li><a href=\"/de/docs/Learn/Common_questions/Design_and_accessibility\">Design und Barrierefreiheit</a></li></ol></details></li></ol>","sidebarMacro":"LearnSidebar","body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<ul class=\"prev-next\">\n <li><a class=\"button secondary\" href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection\"><span class=\"button-wrap\"> Zurück </span></a></li>\n <li><a class=\"button secondary\" href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing\"><span class=\"button-wrap\"> Übersicht: Cross-Browser-Testing</span></a></li>\n <li><a class=\"button secondary\" href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment\"><span class=\"button-wrap\"> Weiter </span></a></li>\n</ul>\n<p>Das mehrmalige manuelle Ausführen von Tests in verschiedenen Browsern und auf verschiedenen Geräten pro Tag kann ermüdend und zeitaufwendig werden. Um dies effizient zu handhaben, sollten Sie sich mit Automatisierungstools vertraut machen. In diesem Artikel betrachten wir, welche Möglichkeiten es gibt, wie man Task-Runner verwendet und wie man die Grundlagen kommerzieller Browser-Tests-Automatisierungs-Apps wie Sauce Labs, BrowserStack und TestingBot nutzt.</p>\n<figure class=\"table-container\"><table>\n <tbody>\n <tr>\n <th scope=\"row\">Voraussetzungen:</th>\n <td>\n Vertrautheit mit den grundlegenden <a href=\"/de/docs/Learn/HTML\">HTML</a>-, <a href=\"/de/docs/Learn/CSS\">CSS</a>- und <a href=\"/de/docs/Learn/JavaScript\">JavaScript</a>-Sprachen;\n eine Vorstellung über die grundlegenden <a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction\">Prinzipien des Cross-Browser-Testings</a>.\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Ziel:</th>\n <td>Ein Verständnis davon zu vermitteln, was automatisiertes Testen beinhaltet, wie es Ihr Leben erleichtern kann und wie Sie einige der kommerziellen Produkte nutzen können, die die Dinge einfacher machen.</td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"automatisierung_macht_die_dinge_einfach","title":"Automatisierung macht die Dinge einfach","isH3":false,"content":"<p>In diesem Modul haben wir viele verschiedene Möglichkeiten beschrieben, wie Sie Ihre Websites und Apps testen können, und erklärt, welchen Umfang Ihre Bemühungen für das Cross-Browser-Testing haben sollten, in Bezug auf welche Browser zu testen sind, Barrierefreiheitsüberlegungen und mehr. Klingt nach viel Arbeit, nicht wahr?</p>\n<p>Wir stimmen zu – das manuelle Testen all der Dinge, die wir in den vorherigen Artikeln betrachtet haben, kann wirklich mühsam sein. Glücklicherweise gibt es Tools, die uns dabei helfen, einen Teil dieser Mühsal zu automatisieren. Es gibt zwei Hauptwege, auf denen wir die Tests, über die wir in diesem Modul gesprochen haben, automatisieren können:</p>\n<ol>\n <li>Verwenden Sie einen Task-Runner wie <a href=\"https://gruntjs.com/\" class=\"external\" target=\"_blank\">Grunt</a>, <a href=\"https://gulpjs.com/\" class=\"external\" target=\"_blank\">Gulp</a> oder <a href=\"https://docs.npmjs.com/misc/scripts/\" class=\"external\" target=\"_blank\">npm scripts</a>, um Tests während Ihres Build-Prozesses auszuführen und Code aufzuräumen. Dies ist eine großartige Möglichkeit, Aufgaben wie das Linten und Minifizieren von Code durchzuführen, CSS-Präfixe hinzuzufügen oder entstehende JavaScript-Features für maximale Cross-Browser-Reichweite zu transpilen und so weiter.</li>\n <li>Verwenden Sie ein Browser-Automatisierungssystem wie <a href=\"https://www.selenium.dev/\" class=\"external\" target=\"_blank\">Selenium</a>, um spezifische Tests in installierten Browsern auszuführen und Ergebnisse zurückzugeben, die Sie über Fehler in Browsern informieren, sobald diese auftreten. Kommerzielle Apps für das Cross-Browser-Testing wie <a href=\"https://saucelabs.com/\" class=\"external\" target=\"_blank\">Sauce Labs</a> und <a href=\"https://www.browserstack.com/\" class=\"external\" target=\"_blank\">BrowserStack</a> basieren auf Selenium, erlauben jedoch den Remote-Zugriff auf ihre Einrichtung mittels einer Schnittstelle, wodurch Ihnen die Mühe erspart bleibt, Ihr eigenes Testsystem einzurichten.</li>\n</ol>\n<p>Wir werden uns im nächsten Artikel ansehen, wie Sie Ihr eigenes Selenium-basiertes Testsystem einrichten können. In diesem Artikel sehen wir uns an, wie Sie einen Task-Runner einrichten und die grundlegende Funktionalität von kommerziellen Systemen wie den oben genannten nutzen.</p>\n<div class=\"notecard note\">\n <p><strong>Hinweis:</strong> Die obigen beiden Kategorien schließen sich nicht gegenseitig aus. Es ist möglich, einen Task-Runner einzurichten, um auf einen Dienst wie Sauce Labs oder LambdaTest über eine API zuzugreifen, Cross-Browser-Tests durchzuführen und Ergebnisse zurückzugeben. Wir werden dies unten ebenfalls betrachten.</p>\n</div>"}},{"type":"prose","value":{"id":"verwendung_eines_task-runners_zur_automatisierung_von_testtools","title":"Verwendung eines Task-Runners zur Automatisierung von Testtools","isH3":false,"content":"<p>Wie wir oben gesagt haben, können Sie gängige Aufgaben wie das Linten und Minifizieren von Code erheblich beschleunigen, indem Sie einen Task-Runner verwenden, um alles, was Sie ausführen müssen, automatisch zu einem bestimmten Zeitpunkt in Ihrem Build-Prozess auszuführen. Beispielsweise könnte dies jedes Mal sein, wenn Sie eine Datei speichern, oder zu einem anderen Zeitpunkt. In diesem Abschnitt sehen wir uns an, wie Sie mit Node und Gulp, einer einsteigerfreundlichen Option, die Aufgabenautomatisierung einrichten können.</p>"}},{"type":"prose","value":{"id":"einrichtung_von_node_und_npm","title":"Einrichtung von Node und npm","isH3":true,"content":"<p>Die meisten Tools heutzutage basieren auf <a href=\"/de/docs/Glossary/Node.js\">Node.js</a>, daher müssen Sie Node.js zusammen mit seinem zugehörigen Paketmanager, <a href=\"https://www.npmjs.com/\" class=\"external\" target=\"_blank\"><code>npm</code></a>, installieren:</p>\n<ol>\n <li>Der einfachste Weg, Node.js und <code>npm</code> zu installieren und zu aktualisieren, führt über einen Node-Version-Manager: Befolgen Sie die Anweisungen unter <a href=\"/de/docs/Learn/Server-side/Express_Nodejs/development_environment#installing_node\">Installieren von Node</a>, um dies zu tun.</li>\n <li>Stellen Sie sicher, dass Sie <a href=\"/de/docs/Learn/Server-side/Express_Nodejs/development_environment#testing_your_nodejs_and_npm_installation\">überprüfen, ob Ihre Installation erfolgreich war</a>, bevor Sie fortfahren.</li>\n <li>Wenn Sie Node.js/<code>npm</code> zuvor installiert haben, sollten Sie auf die neuesten Versionen aktualisieren. Dies kann durch Verwendung des Node-Version-Managers durchgeführt werden, um die neuesten LTS-Versionen zu installieren (verweisen Sie erneut auf die oben verlinkten Anweisungen).</li>\n</ol>\n<p>Um Node/npm-basierte Pakete in Ihren Projekten zu verwenden, müssen Sie Ihre Projektverzeichnisse als npm-Projekte einrichten. Dies ist leicht zu bewerkstelligen.</p>\n<p>Zum Beispiel, lassen Sie uns zuerst ein Testverzeichnis erstellen, damit wir ohne die Angst, etwas zu zerbrechen, herumspielen können.</p>\n<ol>\n <li>\n <p>Erstellen Sie ein neues Verzeichnis an einem sinnvollen Ort mit Ihrer Dateimanager-Oberfläche oder in einer Befehlszeile, indem Sie zu dem gewünschten Speicherort navigieren und den folgenden Befehl ausführen:</p>\n <div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>mkdir node-test\n</code></pre></div>\n </li>\n <li>\n <p>Um dieses Verzeichnis zu einem npm-Projekt zu machen, müssen Sie einfach in Ihr Testverzeichnis gehen und es initialisieren, mit dem folgenden:</p>\n <div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>cd node-test\nnpm init\n</code></pre></div>\n </li>\n <li>\n <p>Dieser zweite Befehl wird Ihnen viele Fragen stellen, um die erforderlichen Informationen zur Einrichtung des Projekts zu erhalten; Sie können vorerst einfach die Standardoptionen auswählen.</p>\n </li>\n <li>\n <p>Sobald alle Fragen gestellt wurden, wird es Sie fragen, ob die eingegebenen Informationen in Ordnung sind. Geben Sie <code>yes</code> ein und drücken Sie die Eingabetaste/Return, und npm wird eine <code>package.json</code>-Datei in Ihrem Verzeichnis generieren.</p>\n </li>\n</ol>\n<p>Diese Datei ist im Grunde eine Konfigurationsdatei für das Projekt. Sie können sie später anpassen, aber vorerst wird sie ungefähr so aussehen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">json</span></div><pre class=\"brush: json notranslate\"><code>{\n \"name\": \"node-test\",\n \"version\": \"1.0.0\",\n \"description\": \"Test for npm projects\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"test\": \"test\"\n },\n \"author\": \"Chris Mills\",\n \"license\": \"MIT\"\n}\n</code></pre></div>\n<p>Damit sind Sie bereit, weiterzumachen.</p>"}},{"type":"prose","value":{"id":"einrichtung_der_gulp-automatisierung","title":"Einrichtung der Gulp-Automatisierung","isH3":true,"content":"<p>Lassen Sie uns die Einrichtung von Gulp und dessen Verwendung zur Automatisierung einiger Testtools betrachten.</p>\n<ol>\n <li>\n <p>\n Erstellen Sie zunächst ein Test-npm-Projekt mit dem im unteren Teil des vorherigen Abschnitts beschriebenen Verfahren.\n Aktualisieren Sie auch die <code>package.json</code>-Datei mit der Zeile: <code>\"type\": \"module\"</code>, sodass sie ungefähr so aussieht:\n </p>\n <div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">json</span></div><pre class=\"brush: json notranslate\"><code>{\n \"name\": \"node-test\",\n \"version\": \"1.0.0\",\n \"description\": \"Test for npm projects\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"test\": \"test\"\n },\n \"author\": \"Chris Mills\",\n \"license\": \"MIT\",\n \"type\": \"module\"\n}\n</code></pre></div>\n </li>\n <li>\n <p>\n Als Nächstes benötigen Sie einige Beispielinhalte aus HTML, CSS und JavaScript, auf denen Sie Ihr System testen können — erstellen Sie Kopien unserer Beispieldateien <a href=\"https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/automation/index.html\" class=\"external\" target=\"_blank\">index.html</a>, <a href=\"https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/automation/main.js\" class=\"external\" target=\"_blank\">main.js</a> und <a href=\"https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/automation/style.css\" class=\"external\" target=\"_blank\">style.css</a> in einem Unterordner mit dem Namen <code>src</code> innerhalb Ihres Projektordners.\n Sie können Ihren eigenen Testinhalt ausprobieren, aber beachten Sie, dass solche Tools nicht auf internem JS/CSS funktionieren — Sie benötigen externe Dateien.\n </p>\n </li>\n <li>\n <p>Installieren Sie zuerst gulp global (d. h., es wird in allen Projekten verfügbar sein) mit dem folgenden Befehl:</p>\n <div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>npm install --global gulp-cli\n</code></pre></div>\n </li>\n <li>\n <p>Führen Sie als Nächstes den folgenden Befehl im Stammverzeichnis Ihres npm-Projekts aus, um gulp als Abhängigkeit Ihres Projekts einzurichten:</p>\n <div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>npm install --save-dev gulp\n</code></pre></div>\n </li>\n <li>\n <p>Erstellen Sie nun eine neue Datei in Ihrem Projektverzeichnis mit dem Namen <code>gulpfile.mjs</code>. Dies ist die Datei, die alle unsere Aufgaben ausführen wird. Fügen Sie in diese Datei Folgendes ein:</p>\n <div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>import gulp from \"gulp\";\n\nexport default function (cb) {\n console.log(\"Gulp running\");\n cb();\n}\n</code></pre></div>\n <p>Damit wird das vorhin installierte <code>gulp</code>-Modul benötigt und dann ein Standardtask exportiert, der nichts anderes macht, als eine Nachricht im Terminal auszugeben — dies ist nützlich, um uns wissen zu lassen, dass Gulp funktioniert. Jeder gulp-Task wird im gleichen grundlegenden Format exportiert — <code>exports.taskName = taskFunction</code>. Jede Funktion nimmt einen Parameter entgegen — einen Callback, der ausgeführt wird, wenn die Aufgabe abgeschlossen ist.</p>\n </li>\n <li>\n <p>Sie können Ihren Standardtask von Gulp mit folgendem Befehl ausführen — probieren Sie dies jetzt aus:</p>\n <div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>gulp\n</code></pre></div>\n </li>\n</ol>"}},{"type":"prose","value":{"id":"einige_echte_aufgaben_zu_gulp_hinzufügen","title":"Einige echte Aufgaben zu Gulp hinzufügen","isH3":true,"content":"<p>Um einige echte Aufgaben zu Gulp hinzuzufügen, müssen wir überlegen, was wir tun möchten. Ein sinnvoller Satz von Grundfunktionen für unser Projekt könnte wie folgt sein:</p>\n<ul>\n <li>html-tidy, css-lint und js-hint zum Linten und Melden/Beheben häufiger HTML/CSS/JS-Fehler (siehe <a href=\"https://www.npmjs.com/package/gulp-htmltidy\" class=\"external\" target=\"_blank\">gulp-htmltidy</a>, <a href=\"https://www.npmjs.com/package/gulp-csslint\" class=\"external\" target=\"_blank\">gulp-csslint</a>, <a href=\"https://www.npmjs.com/package/gulp-jshint\" class=\"external\" target=\"_blank\">gulp-jshint</a>).</li>\n <li>Autoprefixer, um unser CSS zu scannen und benötigte Vendor-Präfixe hinzuzufügen (siehe <a href=\"https://www.npmjs.com/package/gulp-autoprefixer\" class=\"external\" target=\"_blank\">gulp-autoprefixer</a>).</li>\n <li>babel, um neue JavaScript-Syntax-Features in traditionellen Syntax zu transpilen, die in älteren Browsern funktioniert (siehe <a href=\"https://www.npmjs.com/package/gulp-babel\" class=\"external\" target=\"_blank\">gulp-babel</a>).</li>\n</ul>\n<p>Siehe die obigen Links für vollständige Anweisungen zu den verschiedenen Gulp-Paketen, die wir verwenden.</p>\n<p>Um jedes Plugin zu verwenden, müssen Sie es zuerst über npm installieren, dann alle Abhängigkeiten am Anfang der <code>gulpfile.js</code>-Datei anfordern, dann Ihren Test/die Tests am Ende einfügen und schließlich den Namen Ihrer Aufgabe exportieren, damit diese über Gulp-Befehle verfügbar ist.</p>\n<h4 id=\"html-tidy\">html-tidy</h4>\n<ol>\n <li>\n <p>Installieren Sie es mit der folgenden Zeile:</p>\n <div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>npm install --save-dev gulp-htmltidy\n</code></pre></div>\n <div class=\"notecard note\">\n <p><strong>Hinweis:</strong> <code>--save-dev</code> fügt das Paket als Abhängigkeit zu Ihrem Projekt hinzu. Wenn Sie in der <code>package.json</code>-Datei Ihres Projekts nachsehen, werden Sie einen Eintrag dafür im <code>devDependencies</code>-Eigenschaft sehen.</p>\n </div>\n </li>\n <li>\n <p>Fügen Sie die folgende Abhängigkeit zur <code>gulpfile.js</code> hinzu:</p>\n <div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>import htmltidy from \"gulp-htmltidy\";\n</code></pre></div>\n </li>\n <li>\n <p>Fügen Sie den folgenden Test am Ende der <code>gulpfile.js</code> hinzu:</p>\n <div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>export function html() {\n return gulp\n .src(\"src/index.html\")\n .pipe(htmltidy())\n .pipe(gulp.dest(\"build\"));\n}\n</code></pre></div>\n </li>\n <li>\n <p>Ändern Sie den Standardexport zu:</p>\n <div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>export default html;\n</code></pre></div>\n </li>\n</ol>\n<p>Hier nehmen wir unsere Entwicklungsdatei <code>index.html</code> mit <code>gulp.src()</code>, welches uns erlaubt, eine Quelldatei zu erfassen, um damit etwas zu machen.</p>\n<p>Wir verwenden dann die Funktion <code>pipe()</code>, um diese Quelle an einen anderen Befehl zu übergeben, um damit etwas anderes zu tun. Wir können so viele wie wir wollen miteinander verbinden. Wir führen zunächst <code>htmltidy()</code> auf der Quelle aus, welches durchgeht und Fehler in unserer Datei behebt. Die zweite <code>pipe()</code>-Funktion schreibt die Ausgabe-HTML-Datei in das <code>build</code>-Verzeichnis.</p>\n<p>Im Eingangsversion der Datei haben Sie möglicherweise bemerkt, dass wir ein leeres</p>\n<p>-Element eingefügt haben; htmltidy hat dieses entfernt, bis die Ausgabedatei erstellt wurde.</p>\n<h4 id=\"autoprefixer_und_css-lint\">Autoprefixer und css-lint</h4>\n<ol>\n <li>\n <p>Installieren Sie es mit den folgenden Zeilen:</p>\n <div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>npm install --save-dev gulp-autoprefixer\nnpm install --save-dev gulp-csslint\n</code></pre></div>\n </li>\n <li>\n <p>Fügen Sie die folgenden Abhängigkeiten hinzu:</p>\n <div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>import autoprefixer from \"gulp-autoprefixer\";\nimport csslint from \"gulp-csslint\";\n</code></pre></div>\n </li>\n <li>\n <p>Fügen Sie den folgenden Test am Ende hinzu:</p>\n <div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>export function css() {\n return gulp\n .src(\"src/style.css\")\n .pipe(csslint())\n .pipe(csslint.formatter(\"compact\"))\n .pipe(\n autoprefixer({\n cascade: false,\n }),\n )\n .pipe(gulp.dest(\"build\"));\n}\n</code></pre></div>\n </li>\n <li>\n <p>Fügen Sie die folgende Eigenschaft zur <code>package.json</code> hinzu:</p>\n <div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">json</span></div><pre class=\"brush: json notranslate\"><code>\"browserslist\": [\n \"last 5 versions\"\n]\n</code></pre></div>\n </li>\n <li>\n <p>Ändern Sie die Standardaufgabe zu:</p>\n <div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>export default gulp.series(html, css);\n</code></pre></div>\n </li>\n</ol>\n<p>Hier erfassen wir unsere Datei <code>style.css</code>, führen <code>csslint</code> darauf aus (welches eine Liste von Fehlern in Ihrem CSS im Terminal ausgibt), und führen sie dann durch <code>autoprefixer</code>, um alle erforderlichen Präfixe hinzuzufügen, um neue CSS-Features auf älteren Browsern auszuführen. Am Ende der pipe-Kette geben wir unser modifiziertes, mit Präfix versehenes CSS in das Verzeichnis <code>build</code> aus. Beachten Sie, dass dies nur funktioniert, wenn <code>csslint</code> keine Fehler findet — versuchen Sie, eine geschweifte Klammer aus Ihrer CSS-Datei zu entfernen und <code>gulp</code> erneut auszuführen, um zu sehen, welche Ausgabe Sie erhalten!</p>\n<h4 id=\"js-hint_und_babel\">js-hint und babel</h4>\n<ol>\n <li>\n <p>Installieren Sie es mit den folgenden Zeilen:</p>\n <div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>npm install --save-dev gulp-babel @babel/preset-env\nnpm install --save-dev @babel/core\nnpm install jshint gulp-jshint --save-dev\n</code></pre></div>\n </li>\n <li>\n <p>Fügen Sie die folgenden Abhängigkeiten hinzu:</p>\n <div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>import babel from \"gulp-babel\";\nimport jshint from \"gulp-jshint\";\n</code></pre></div>\n </li>\n <li>\n <p>Fügen Sie den folgenden Test am Ende hinzu:</p>\n <div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>export function js() {\n return gulp\n .src(\"src/main.js\")\n .pipe(jshint())\n .pipe(jshint.reporter(\"default\"))\n .pipe(\n babel({\n presets: [\"@babel/env\"],\n }),\n )\n .pipe(gulp.dest(\"build\"));\n}\n</code></pre></div>\n </li>\n <li>\n <p>Ändern Sie die Standardaufgabe zu:</p>\n <div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>export default gulp.series(html, css, js);\n</code></pre></div>\n </li>\n</ol>\n<p>Hier erfassen wir unsere Datei <code>main.js</code>, führen <code>jshint</code> darauf aus und geben die Ergebnisse mit <code>jshint.reporter</code> im Terminal aus; wir übergeben dann die Datei an <code>babel</code>, welches sie in alten Syntax umwandelt und das Ergebnis in das <code>build</code>-Verzeichnis ausgibt. Unser ursprünglicher Code enthielt eine <a href=\"/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions\">Fat Arrow Function</a>, welche <code>babel</code> in eine alte Funktion umgewandelt hat.</p>\n<h4 id=\"weitere_ideen\">Weitere Ideen</h4>\n<p>Sobald alles eingerichtet ist, können Sie den Befehl <code>gulp</code> in Ihrem Projektverzeichnis ausführen und Sie sollten eine Ausgabe erhalten, die wie folgt aussieht:</p>\n<p>\n <img src=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing/gulp-output.png\" alt=\"Ausgabe in einem Code-Editor, in dem Zeilen die Start- oder Endzeiten von Aufgaben, den Aufgabennamen und die Dauer von 'Fertiggestellten' Aufgaben anzeigen.\" width=\"697\" height=\"478\" loading=\"lazy\">\n</p>\n<p>Sie können dann versuchen, die von Ihren automatisierten Aufgaben ausgegebenen Dateien zu testen, indem Sie sie im Verzeichnis <code>build</code> betrachten und <code>build/index.html</code> in Ihrem Webbrowser laden.</p>\n<p>Wenn Sie Fehler bekommen, überprüfen Sie, ob Sie alle Abhängigkeiten und die Tests wie oben gezeigt hinzugefügt haben; versuchen Sie auch, die HTML/CSS/JavaScript-Codeabschnitte auszukommentieren und <code>gulp</code> erneut auszuführen, um zu sehen, ob Sie das Problem isolieren können.</p>\n<p>Gulp verfügt über eine <code>watch()</code>-Funktion, mit der Sie Ihre Dateien überwachen und Tests ausführen können, wann immer Sie eine Datei speichern. Zum Beispiel, versuchen Sie, das Folgende am Ende Ihrer <code>gulpfile.js</code> hinzuzufügen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>export function watch() {\n gulp.watch(\"src/*.html\", html);\n gulp.watch(\"src/*.css\", css);\n gulp.watch(\"src/*.js\", js);\n}\n</code></pre></div>\n<p>Versuchen Sie nun, den Befehl <code>gulp watch</code> in Ihr Terminal einzugeben. Gulp wird nun Ihr Verzeichnis überwachen und die entsprechenden Aufgaben ausführen, wann immer Sie eine Änderung an einer HTML-, CSS- oder JavaScript-Datei speichern.</p>\n<div class=\"notecard note\">\n <p><strong>Hinweis:</strong> Das <code>*</code> Zeichen ist ein Platzhalterzeichen — hier sagen wir \"führe diese Aufgaben aus, wenn beliebige Dateien dieses Typs gespeichert werden\". Sie könnten ebenfalls Platzhalter in Ihren Hauptaufgaben verwenden, z. B. <code>gulp.src('src/*.css')</code> würde alle Ihre CSS-Dateien erfassen und dann gepipte Aufgaben darauf anwenden.</p>\n</div>\n<p>Es gibt viel mehr, was Sie mit Gulp machen können. Das <a href=\"https://gulpjs.com/plugins/\" class=\"external\" target=\"_blank\">Gulp-Plugin-Verzeichnis</a> hat buchstäblich tausende von Plugins zum Durchsuchen.</p>"}},{"type":"prose","value":{"id":"andere_task-runner","title":"Andere Task-Runner","isH3":true,"content":"<p>Es gibt viele andere Task-Runner, die verfügbar sind. Wir wollen sicherlich nicht behaupten, dass Gulp die beste Lösung ist, die es gibt, aber es funktioniert für uns und ist für Anfänger ziemlich zugänglich. Sie könnten auch versuchen, andere Lösungen zu verwenden:</p>\n<ul>\n <li>Grunt arbeitet sehr ähnlich wie Gulp, außer dass es auf in einer Konfigurationsdatei angegebenen Aufgaben basiert, anstatt geschriebenen JavaScript zu verwenden. Siehe <a href=\"https://gruntjs.com/getting-started\" class=\"external\" target=\"_blank\">Getting started with Grunt for more details</a>.</li>\n <li>Sie können auch Aufgaben direkt mit npm-Scripts ausführen, die sich in Ihrer <code>package.json</code>-Datei befinden, ohne dass Sie irgendein zusätzliches Task-Runner-System installieren müssen. Dies funktioniert nach dem Prinzip, dass Dinge wie Gulp-Plugins im Grunde Wrapper um Befehlszeilentools sind. Wenn Sie also herausfinden können, wie Sie die Tools mit der Befehlszeile ausführen, können Sie sie dann mit npm-Scripts ausführen. Es ist ein bisschen schwieriger zu handhaben, kann aber lohnend sein für diejenigen, die stark mit ihren Befehlszeilenfähigkeiten sind. <a href=\"https://css-tricks.com/why-npm-scripts/\" class=\"external\" target=\"_blank\">Why npm scripts?</a> bietet eine gute Einführung mit vielen weiteren Informationen.</li>\n</ul>"}},{"type":"prose","value":{"id":"verwendung_kommerzieller_testservices_um_browser-tests_zu_beschleunigen","title":"Verwendung kommerzieller Testservices, um Browser-Tests zu beschleunigen","isH3":false,"content":"<p>Schauen wir uns jetzt kommerzielle Drittanbieter-Browser-Testservices an und was sie für uns tun können.</p>\n<p>Wenn Sie diese Art von Services nutzen, geben Sie eine URL der Seite, die Sie testen möchten, zusammen mit Informationen wie den Browsern, in denen Sie testen möchten, an. Die App konfiguriert dann eine neue VM mit dem von Ihnen angegebenen Betriebssystem und Browser und gibt die Testergebnisse in Form von Screenshots, Videos, Protokolldateien, Text usw. zurück. Das ist sehr praktisch und um einiges bequemer, als all die Kombinationen aus Betriebssystemen und Browsern selbst einrichten zu müssen.</p>\n<p>Sie können dann einen Gang höher schalten und mithilfe einer API auf die Funktionalität programmatisch zugreifen, was bedeutet, dass solche Apps mit Task-Runnern kombiniert werden können, wie z. B. Ihren eigenen lokalen Selenium-Umgebungen und anderen, um automatisierte Tests zu erstellen.</p>\n<div class=\"notecard note\">\n <p><strong>Hinweis:</strong> Es gibt noch andere kommerzielle Browser-Testsysteme, aber in diesem Artikel konzentrieren wir uns auf BrowserStack, Sauce Labs und TestingBot. Wir sagen nicht unbedingt, dass dies die besten Werkzeuge sind, die verfügbar sind, aber sie sind gute Werkzeuge, die einfach für Anfänger zu verwenden sind.</p>\n</div>"}},{"type":"prose","value":{"id":"browserstack","title":"BrowserStack","isH3":true,"content":"<h4 id=\"einstieg_in_browserstack\">Einstieg in BrowserStack</h4>\n<p>Um mit BrowserStack loszulegen:</p>\n<ol>\n <li>Erstellen Sie ein <a href=\"https://www.browserstack.com/users/sign_up\" class=\"external\" target=\"_blank\">BrowserStack-Testkonto</a>.</li>\n <li>Melden Sie sich an. Dies sollte automatisch geschehen, nachdem Sie Ihre E-Mail-Adresse bestätigt haben.</li>\n <li>Klicken Sie auf den Link <em>Live</em> im oberen Navigationsmenü, um zu Live Manual Testing zu gelangen.</li>\n</ol>\n<h4 id=\"die_grundlagen_manuelle_tests\">Die Grundlagen: Manuelle Tests</h4>\n<p>Das BrowserStack Live-Dashboard ermöglicht es Ihnen auszuwählen, auf welchem Gerät und Browser Sie testen möchten — Plattformen auf der linken Seite, Geräte auf der rechten Seite. Wählen Sie ein Gerät aus, um die Auswahl der auf diesem Gerät verfügbaren Browser zu sehen.</p>\n<p>\n <img src=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing/browserstack-test-choices-sized.png\" alt=\"Testauswahl\" width=\"1000\" height=\"482\" loading=\"lazy\">\n</p>\n<p>Durch Klicken auf eines dieser Browser-Symbole wird Ihre Wahl von Plattform, Gerät und Browser geladen — wählen Sie einen aus und probieren Sie ihn aus.</p>\n<p>\n <img src=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing/browserstack-test-device-sized.png\" alt=\"Testgeräte\" width=\"300\" height=\"629\" loading=\"lazy\">\n</p>\n<p>Sie können URLs in die Adressleiste eingeben, nach oben und unten scrollen, indem Sie mit der Maus ziehen, und geeignete Gesten (zum Beispiel Pinch/Zoom, zwei Finger zum Scrollen) auf unterstützten Geräten wie MacBooks verwenden. Nicht alle Funktionen sind auf allen Geräten verfügbar.</p>\n<p>Sie sehen auch ein Menü, das es Ihnen ermöglicht, die Sitzung zu steuern.</p>\n<p>\n <img src=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing/browserstack-test-menu-sized.png\" alt=\"Testmenü\" width=\"180\" height=\"519\" loading=\"lazy\">\n</p>\n<p>Die verfügbaren Funktionen variieren je nach geladenem Browser und können Steuerungen beinhalten für:</p>\n<ul>\n <li>Anzeige von Informationen über den aktuellen Browser</li>\n <li>Wechseln zu anderen Browsern</li>\n <li>Testen von localhost-URLs</li>\n <li>Einstellen des Zoom-Levels und Umschalten der Orientierung</li>\n <li>Speichern und Laden von Lesezeichen</li>\n <li>Aufzeichnen/Kommentieren von Screenshots und Erfassen von Fehlerberichten</li>\n <li>Zugriff auf die DevTools des Browsers</li>\n <li>Ändern des Meldestandorts</li>\n <li>Drosseln des Netzwerks</li>\n <li>Zugriff auf Bildschirmleser</li>\n</ul>\n<h4 id=\"erweitert_die_browserstack_api\">Erweitert: Die BrowserStack API</h4>\n<p>BrowserStack hat auch eine <a href=\"https://www.browserstack.com/docs/automate/api-reference/selenium/introduction\" class=\"external\" target=\"_blank\">restful API</a>, die es Ihnen ermöglicht, programmatisch Details zu Ihrem Konto, Ihren Sitzungen, Builds usw. abzurufen.</p>\n<p>Lassen Sie uns einen kurzen Blick darauf werfen, wie wir auf die API mit Node.js zugreifen würden.</p>\n<ol>\n <li>\n <p>Richten Sie zunächst ein neues npm-Projekt ein, um dies auszuprobieren, wie im Abschnitt <a href=\"#einrichtung_von_node_und_npm\">Einrichtung von Node und npm</a> beschrieben. Verwenden Sie einen anderen Verzeichnisnamen als zuvor, zum Beispiel <code>bstack-test</code>.</p>\n </li>\n <li>\n <p>Erstellen Sie eine neue Datei im Stammverzeichnis Ihres Projekts mit dem Namen <code>call_bstack.js</code> und geben Sie ihr den folgenden Inhalt:</p>\n <div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const axios = require(\"axios\");\n\nconst bsUser = \"BROWSERSTACK_USERNAME\";\nconst bsKey = \"BROWSERSTACK_ACCESS_KEY\";\nconst baseUrl = `https://${bsUser}:${bsKey}@www.browserstack.com/automate/`;\n\nfunction getPlanDetails() {\n axios.get(`${baseUrl}plan.json`).then((response) => {\n console.log(response.data);\n });\n /* Response:\n {\n automate_plan: <string>,\n terminal_access: <string>.\n parallel_sessions_running: <int>,\n team_parallel_sessions_max_allowed: <int>,\n parallel_sessions_max_allowed: <int>,\n queued_sessions: <int>,\n queued_sessions_max_allowed: <int>\n }\n */\n}\n\ngetPlanDetails();\n</code></pre></div>\n </li>\n <li>\n <p>Ersetzen Sie die Platzhalter für BrowserStack-Benutzernamen und Zugangsschlüssel durch Ihre tatsächlichen Werte. Diese können von Ihren <a href=\"https://www.browserstack.com/accounts/profile/details\" class=\"external\" target=\"_blank\">BrowserStack Account & Profile Details</a> abgerufen werden, unter dem Abschnitt <em>Authentication & Security</em>.</p>\n </li>\n <li>\n <p>Installieren Sie das <a href=\"https://www.npmjs.com/package/axios\" class=\"external\" target=\"_blank\">axios</a>-Modul, das wir im Code verwenden, um HTTP-Anfragen zu senden, indem Sie den folgenden Befehl in Ihrem Terminal ausführen (wir haben axios gewählt, weil es einfach, populär und gut unterstützt ist):</p>\n <div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>npm install axios\n</code></pre></div>\n </li>\n <li>\n <p>Stellen Sie sicher, dass Ihre JavaScript-Datei gespeichert ist, und führen Sie sie aus, indem Sie den folgenden Befehl in Ihrem Terminal ausführen. Sie sollten ein Objekt im Terminal sehen, das Ihre BrowserStack-Plandetails enthält.</p>\n <div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>node call_bstack\n</code></pre></div>\n </li>\n</ol>\n<p>Unten haben wir auch einige andere gebrauchsfertige Funktionen bereitgestellt, die nützlich sein könnten, wenn Sie mit der BrowserStack-RESTful-API arbeiten.</p>\n<p>Diese Funktion gibt die Zusammenfassung aller zuvor erstellten automatisierten Builds zurück (siehe den nächsten Artikel für <a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment#browserstack\">BrowserStack automatisierte Testdetails</a>):</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function getBuilds() {\n axios.get(`${baseUrl}builds.json`).then((response) => {\n console.log(response.data);\n });\n\n /* Response:\n [\n {\n automation_build: {\n name: <string>,\n hashed_id: <string>,\n duration: <int>,\n status: <string>,\n build_tag: <string>,\n public_url: <string>\n }\n },\n {\n automation_build: {\n name: <string>,\n hashed_id: <string>,\n duration: <int>,\n status: <string>,\n build_tag: <string>,\n public_url: <string>\n }\n },\n // …\n ]\n */\n}\n</code></pre></div>\n<p>Diese Funktion gibt Details zu den spezifischen Sitzungen für einen bestimmten Build zurück:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function getSessionsInBuild(build) {\n const buildId = build.automation_build.hashed_id;\n axios.get(`${baseUrl}builds/${buildId}/sessions.json`).then((response) => {\n console.log(response.data);\n });\n /* Response:\n [\n {\n automation_session: {\n name: <string>,\n duration: <int>,\n os: <string>,\n os_version: <string>,\n browser_version: <string>,\n browser: <string>,\n device: <string>,\n status: <string>,\n hashed_id: <string>,\n reason: <string>,\n build_name: <string>,\n project_name: <string>,\n logs: <string>,\n browser_url: <string>,\n public_url: <string>,\n appium_logs_url: <string>,\n video_url: <string>,\n browser_console_logs_url: <string>,\n har_logs_url: <string>,\n selenium_logs_url: <string>\n }\n },\n {\n automation_session: {\n // …\n }\n },\n // …\n ]\n */\n}\n</code></pre></div>\n<p>Die folgende Funktion gibt die Details für eine bestimmte Sitzung zurück:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function getSessionDetails(session) {\n const sessionId = session.automation_session.hashed_id;\n axios.get(`${baseUrl}sessions/${sessionId}.json`).then((response) => {\n console.log(response.data);\n });\n /* Response:\n {\n automation_session: {\n name: <string>,\n duration: <int>,\n os: <string>,\n os_version: <string>,\n browser_version: <string>,\n browser: <string>,\n device: <string>,\n status: <string>,\n hashed_id: <string>,\n reason: <string>,\n build_name: <string>,\n project_name: <string>,\n logs: <string>,\n browser_url: <string>,\n public_url: <string>,\n appium_logs_url: <string>,\n video_url: <string>,\n browser_console_logs_url: <string>,\n har_logs_url: <string>,\n selenium_logs_url: <string>\n }\n }\n */\n}\n</code></pre></div>\n<h4 id=\"erweitert_automatisierte_tests\">Erweitert: Automatisierte Tests</h4>\n<p>Wir werden das <a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment#browserstack\">Durchführen von automatisierten BrowserStack-Tests</a> im nächsten Artikel behandeln.</p>"}},{"type":"prose","value":{"id":"sauce_labs","title":"Sauce Labs","isH3":true,"content":"<h4 id=\"einstieg_in_sauce_labs\">Einstieg in Sauce Labs</h4>\n<p>Lassen Sie uns mit einem Sauce Labs-Test beginnen.</p>\n<ol>\n <li>Erstellen Sie ein Sauce Labs-Testkonto.</li>\n <li>Melden Sie sich an. Dies sollte automatisch geschehen, nachdem Sie Ihre E-Mail-Adresse bestätigt haben.</li>\n</ol>\n<h4 id=\"die_grundlagen_manuelle_tests_2\">Die Grundlagen: Manuelle Tests</h4>\n<p>Das <a href=\"https://app.saucelabs.com/dashboard/manual\" class=\"external\" target=\"_blank\">Sauce Labs-Dashboard</a> bietet viele verfügbare Optionen. Für den Moment, stellen Sie sicher, dass Sie auf dem Tab <em>Manuelle Tests</em> sind.</p>\n<ol>\n <li>\n <p>Klicken Sie auf <em>Start a new manual session</em>.</p>\n </li>\n <li>\n <p>Geben Sie im nächsten Bildschirm die URL der Seite ein, die Sie testen möchten (verwenden Sie z. B. <a href=\"https://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html\" class=\"external\" target=\"_blank\">https://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html</a>), wählen Sie dann eine Browser-/OS-Kombination aus, die Sie mit den verschiedenen Buttons und Listen testen möchten. Es gibt sehr viel Auswahl, wie Sie sehen werden!!\n <img src=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing/sauce-manual-session.png\" alt=\"select sauce manual session\" width=\"600\" height=\"636\" loading=\"lazy\">\n </p>\n </li>\n <li>\n <p>Wenn Sie auf die Schaltfläche Sitzung starten klicken, wird ein Ladescreen angezeigt, der eine virtuelle Maschine mit der von Ihnen gewählten Kombination lädt.</p>\n </li>\n <li>\n <p>Wenn das Laden abgeschlossen ist, können Sie mit dem Remote-Test der Webseite im gewählten Browser beginnen.\n <img src=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing/sauce-test-running.png\" alt=\"Sauce test running\" width=\"800\" height=\"390\" loading=\"lazy\">\n </p>\n </li>\n <li>\n <p>Von hier aus können Sie das Layout so sehen, wie es im zu testenden Browser aussehen würde, die Maus bewegen und versuchen, auf Buttons zu klicken usw. Das obere Menü erlaubt Ihnen:</p>\n <ul>\n <li>Die Sitzung zu beenden</li>\n <li>Jemand anderem eine URL zu geben, damit er den Test aus der Ferne beobachten kann.</li>\n <li>Text/Notizen in eine entfernte Zwischenablage kopieren.</li>\n <li>Einen Screenshot aufnehmen.</li>\n <li>Im Vollbildmodus testen.</li>\n </ul>\n </li>\n</ol>\n<p>Sobald Sie die Sitzung beendet haben, kehren Sie zum Tab Manuelle Tests zurück, wo Sie einen Eintrag für jede der begonnenen manuellen Sitzungen sehen werden. Das Klicken auf einen dieser Einträge zeigt weitere Daten zur Sitzung an. Hier können Sie alle aufgenommenen Screenshots herunterladen, ein Video der Sitzung ansehen, Datenprotokolle anzeigen und mehr.</p>\n<div class=\"notecard note\">\n <p><strong>Hinweis:</strong> Das ist bereits sehr nützlich und um einiges bequemer, als all diese Emulatoren und virtuellen Maschinen selbst einrichten zu müssen.</p>\n</div>\n<h4 id=\"erweitert_die_sauce_labs_api\">Erweitert: Die Sauce Labs API</h4>\n<p>Sauce Labs hat eine <a href=\"https://docs.saucelabs.com/dev/api/\" class=\"external\" target=\"_blank\">restful API</a>, die es ermöglicht, programmatisch auf Details Ihres Kontos und bestehender Tests zuzugreifen und Tests mit weiteren Details zu versehen, wie ihrem Bestanden-/Nicht-bestanden-Status, der bei manuellem Testen allein nicht aufzeichnungsfähig ist. Zum Beispiel möchten Sie möglicherweise einen Ihrer eigenen Selenium-Tests remote mit Sauce Labs ausführen, um eine bestimmte Browser-/OS-Kombination zu testen, und dann die Testergebnisse an Sauce Labs zurückgeben.</p>\n<p>Es gibt mehrere Clients, die es Ihnen ermöglichen, Aufrufe zur API unter Verwendung Ihrer bevorzugten Umgebung zu machen, sei es PHP, Java, Node.js usw.</p>\n<p>Lassen Sie uns einen kurzen Blick darauf werfen, wie wir die API unter Verwendung von Node.js und <a href=\"https://github.com/saucelabs/node-saucelabs\" class=\"external\" target=\"_blank\">node-saucelabs</a> aufrufen würden.</p>\n<ol>\n <li>\n <p>Richten Sie zunächst ein neues npm-Projekt ein, um dies auszuprobieren, wie im Abschnitt <a href=\"#einrichtung_von_node_und_npm\">Einrichtung von Node und npm</a> beschrieben. Verwenden Sie einen anderen Verzeichnisnamen als zuvor, zum Beispiel <code>sauce-test</code>.</p>\n </li>\n <li>\n <p>Installieren Sie den Node Sauce Labs-Wrapper mit folgendem Befehl:</p>\n <div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>npm install saucelabs\n</code></pre></div>\n </li>\n <li>\n <p>Erstellen Sie eine neue Datei im Projektstammverzeichnis mit dem Namen <code>call_sauce.js</code>. Gib ihr folgenden Inhalt:</p>\n <div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const SauceLabs = require(\"saucelabs\").default;\n\n(async () => {\n const myAccount = new SauceLabs({\n username: \"your-sauce-username\",\n password: \"your-sauce-api-key\",\n });\n\n // Get full WebDriver URL from the client depending on region:\n console.log(myAccount.webdriverEndpoint);\n\n // Get job details of last run job\n const jobs = await myAccount.listJobs(\"your-sauce-username\", {\n limit: 1,\n full: true,\n });\n\n console.log(jobs);\n})();\n</code></pre></div>\n </li>\n <li>\n <p>Sie müssen Ihren Sauce Labs-Benutzernamen und API-Schlüssel an den angegebenen Stellen ausfüllen. Diese können von Ihrer <a href=\"https://app.saucelabs.com/user-settings\" class=\"external\" target=\"_blank\">User Settings</a> Seite abgerufen werden. Füllen Sie diese jetzt aus.</p>\n </li>\n <li>\n <p>Stellen Sie sicher, dass alles gespeichert ist, und führen Sie Ihre Datei so aus:</p>\n <div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>node call_sauce\n</code></pre></div>\n </li>\n</ol>\n<h4 id=\"erweitert_automatisierte_tests_2\">Erweitert: Automatisierte Tests</h4>\n<p>Wir werden das eigentliche Ausführen automatisierter Sauce Labs-Tests im nächsten Artikel behandeln.</p>"}},{"type":"prose","value":{"id":"testingbot","title":"TestingBot","isH3":true,"content":"<h4 id=\"einstieg_in_testingbot\">Einstieg in TestingBot</h4>\n<p>Lassen Sie uns mit einem TestingBot-Test beginnen.</p>\n<ol>\n <li>Erstellen Sie ein <a href=\"https://testingbot.com/users/sign_up\" class=\"external\" target=\"_blank\">TestingBot-Testkonto</a>.</li>\n <li>Melden Sie sich an. Dies sollte automatisch nach Bestätigung Ihrer E-Mail-Adresse geschehen.</li>\n</ol>\n<h4 id=\"die_grundlagen_manuelle_tests_3\">Die Grundlagen: Manuelle Tests</h4>\n<p>Das <a href=\"https://testingbot.com/members\" class=\"external\" target=\"_blank\">TestingBot-Dashboard</a> listet die verschiedenen Optionen auf, aus denen Sie wählen können. Stellen Sie vorerst sicher, dass Sie auf dem Tab <em>Live Web Testing</em> sind.</p>\n<ol>\n <li>\n <p>Geben Sie die URL der Seite ein, die Sie testen möchten.</p>\n </li>\n <li>\n <p>\n Wählen Sie die Browser-/OS-Kombination aus, die Sie testen möchten, indem Sie die Kombination im Raster auswählen.\n \n <img src=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing/screen_shot_2019-04-19_at_14.55.33.png\" alt=\"Testauswahl\" width=\"1159\" height=\"586\" loading=\"lazy\">\n </p>\n </li>\n <li>\n <p>Wenn Sie auf <em>Start Browser</em> klicken, wird ein Ladescreen angezeigt, der eine virtuelle Maschine mit der von Ihnen gewählten Kombination lädt.</p>\n </li>\n <li>\n <p>Sobald das Laden abgeschlossen ist, können Sie mit dem Remote-Test der Webseite im gewählten Browser beginnen.</p>\n </li>\n <li>\n <p>Von hier aus können Sie das Layout so sehen, wie es im zu testenden Browser aussehen würde, die Maus bewegen und versuchen, auf Buttons zu klicken usw. Das Seitenmenü erlaubt Ihnen:</p>\n <ul>\n <li>Die Sitzung zu beenden</li>\n <li>Die Bildschirmauflösung zu ändern</li>\n <li>Text/Notizen in eine entfernte Zwischenablage zu kopieren</li>\n <li>Screenshots zu machen, zu bearbeiten und herunterzuladen</li>\n <li>Im Vollbildmodus testen.</li>\n </ul>\n </li>\n</ol>\n<p>Sobald Sie die Sitzung beendet haben, kehren Sie zur Seite <em>Live Web Testing</em> zurück, wo Sie einen Eintrag für jede der begonnenen manuellen Sitzungen sehen werden. Das Klicken auf einen dieser Einträge zeigt weitere Daten zur Sitzung an. Hier können Sie alle aufgenommenen Screenshots herunterladen, ein Video des Tests ansehen und Sitzungsprotokolle einsehen.</p>\n<h4 id=\"erweitert_die_testingbot_api\">Erweitert: Die TestingBot API</h4>\n<p>TestingBot hat eine <a href=\"https://testingbot.com/support/api\" class=\"external\" target=\"_blank\">restful API</a>, die es ermöglicht, programmatisch auf Details Ihres Kontos und bestehender Tests zuzugreifen und Tests mit weiteren Details wie dem Bestanden-/Nicht-bestanden-Status zu versehen, der bei manuellem Testen allein nicht aufzeichnungsfähig ist.</p>\n<p>TestingBot hat mehrere API-Clients, die Sie verwenden können, um mit der API zu interagieren, einschließlich Clients für NodeJS, Python, Ruby, Java und PHP.</p>\n<p>Unten finden Sie ein Beispiel, wie Sie mit dem NodeJS-Client <a href=\"https://www.npmjs.com/package/testingbot-api\" class=\"external\" target=\"_blank\">testingbot-api</a> mit der TestingBot-API interagieren.</p>\n<ol>\n <li>\n <p>Richten Sie zunächst ein neues npm-Projekt ein, um dies auszuprobieren, wie im Abschnitt <a href=\"#einrichtung_von_node_und_npm\">Einrichtung von Node und npm</a> beschrieben. Verwenden Sie einen anderen Verzeichnisnamen als zuvor, zum Beispiel <code>tb-test</code>.</p>\n </li>\n <li>\n <p>Installieren Sie den Node TestingBot-Wrapper mit dem folgenden Befehl:</p>\n <div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>npm install testingbot-api\n</code></pre></div>\n </li>\n <li>\n <p>Erstellen Sie eine neue Datei im Projektstammverzeichnis namens <code>tb.js</code>. Gib ihr den folgenden Inhalt:</p>\n <div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const TestingBot = require(\"testingbot-api\");\n\nlet tb = new TestingBot({\n api_key: \"your-tb-key\",\n api_secret: \"your-tb-secret\",\n});\n\ntb.getTests(function (err, tests) {\n console.log(tests);\n});\n</code></pre></div>\n </li>\n <li>\n <p>Sie müssen Ihren TestingBot-Schlüssel und Ihr Geheimnis an den angegebenen Stellen ausfüllen. Diese finden Sie im <a href=\"https://testingbot.com/members/user/edit\" class=\"external\" target=\"_blank\">TestingBot-Dashboard</a>.</p>\n </li>\n <li>\n <p>Stellen Sie sicher, dass alles gespeichert ist, und führen Sie die Datei aus:</p>\n <div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>node tb.js\n</code></pre></div>\n </li>\n</ol>\n<h4 id=\"erweitert_automatisierte_tests_3\">Erweitert: Automatisierte Tests</h4>\n<p>Wir werden das eigentliche Ausführen automatisierter TestingBot-Tests im nächsten Artikel behandeln.</p>"}},{"type":"prose","value":{"id":"zusammenfassung","title":"Zusammenfassung","isH3":false,"content":"<p>Das war eine ziemliche Reise, aber ich bin sicher, Sie können anfangen die Vorteile der Verwendung von Automatisierungstools zu sehen, um einen Teil der Mühen beim Testen zu übernehmen.</p>\n<p>Im nächsten Artikel werden wir uns ansehen, wie wir unser eigenes lokales Automatisierungssystem mit Selenium einrichten und wie man dies mit Diensten wie Sauce Labs, BrowserStack und TestingBot kombiniert.</p><ul class=\"prev-next\">\n <li><a class=\"button secondary\" href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection\"><span class=\"button-wrap\"> Zurück </span></a></li>\n <li><a class=\"button secondary\" href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing\"><span class=\"button-wrap\"> Übersicht: Cross-Browser-Testing</span></a></li>\n <li><a class=\"button secondary\" href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment\"><span class=\"button-wrap\"> Weiter </span></a></li>\n</ul>"}}],"toc":[{"text":"Automatisierung macht die Dinge einfach","id":"automatisierung_macht_die_dinge_einfach"},{"text":"Verwendung eines Task-Runners zur Automatisierung von Testtools","id":"verwendung_eines_task-runners_zur_automatisierung_von_testtools"},{"text":"Verwendung kommerzieller Testservices, um Browser-Tests zu beschleunigen","id":"verwendung_kommerzieller_testservices_um_browser-tests_zu_beschleunigen"},{"text":"Zusammenfassung","id":"zusammenfassung"}],"summary":"Das mehrmalige manuelle Ausführen von Tests in verschiedenen Browsern und auf verschiedenen Geräten pro Tag kann ermüdend und zeitaufwendig werden. Um dies effizient zu handhaben, sollten Sie sich mit Automatisierungstools vertraut machen. In diesem Artikel betrachten wir, welche Möglichkeiten es gibt, wie man Task-Runner verwendet und wie man die Grundlagen kommerzieller Browser-Tests-Automatisierungs-Apps wie Sauce Labs, BrowserStack und TestingBot nutzt.","popularity":0,"modified":null,"other_translations":[{"locale":"en-US","title":"Introduction to automated testing","native":"English (US)"},{"locale":"ja","title":"自動化テストの紹介","native":"日本語"},{"locale":"zh-CN","title":"自动化测试简介","native":"中文 (简体)"},{"locale":"zh-TW","title":"自動化測試介紹","native":"正體中文 (繁體)"}],"pageType":"unknown","source":{"folder":"de/learn/tools_and_testing/cross_browser_testing/automated_testing","github_url":"https://github.com/mdn/translated-content/blob/main/files/de/learn/tools_and_testing/cross_browser_testing/automated_testing/index.md","last_commit_url":"https://github.com/mdn/translated-content/commit/null","filename":"index.md"},"short_title":"Einführung in automatisiertes Testen","parents":[{"uri":"/de/docs/Learn","title":"Webentwicklung lernen"},{"uri":"/de/docs/Learn/Tools_and_testing","title":"Tools und Tests"},{"uri":"/de/docs/Learn/Tools_and_testing/Cross_browser_testing","title":"Cross-Browser-Testing"},{"uri":"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing","title":"Einführung in automatisiertes Testen"}],"pageTitle":"Einführung in automatisiertes Testen - Webentwicklung lernen | MDN","noIndexing":false}}</script></body></html>