CINXE.COM
Einführung in automatisiertes Testen - Lernen Sie Webentwicklung | MDN
<!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 - Lernen Sie Webentwicklung | MDN</title><link rel="alternate" title="Introduction to automated testing" href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Automated_testing" hrefLang="en"/><link rel="alternate" title="自動化テストの紹介" href="https://developer.mozilla.org/ja/docs/Learn_web_development/Extensions/Testing/Automated_testing" hrefLang="ja"/><link rel="alternate" title="自动化测试简介" href="https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Extensions/Testing/Automated_testing" hrefLang="zh"/><link rel="alternate" title="自動化測試介紹" href="https://developer.mozilla.org/zh-TW/docs/Learn_web_development/Extensions/Testing/Automated_testing" hrefLang="zh-Hant"/><link rel="alternate" title="Einführung in automatisiertes Testen" href="https://developer.mozilla.org/de/docs/Learn_web_development/Extensions/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="description" content="Mehrmals täglich Tests manuell auf verschiedenen Browsern und Geräten durchzuführen, kann mühsam und zeitraubend sein. Um dies effizient zu handhaben, sollten Sie sich mit Automatisierungstools vertraut machen. In diesem Artikel betrachten wir, was verfügbar ist, wie man Task-Runner verwendet, und wie man die Grundlagen kommerzieller Browser-Test-Automatisierungs-Apps wie Sauce Labs, BrowserStack und TestingBot nutzt."/><meta property="og:url" content="https://developer.mozilla.org/de/docs/Learn_web_development/Extensions/Testing/Automated_testing"/><meta property="og:title" content="Einführung in automatisiertes Testen - Lernen Sie Webentwicklung | MDN"/><meta property="og:type" content="website"/><meta property="og:locale" content="de"/><meta property="og:description" content="Mehrmals täglich Tests manuell auf verschiedenen Browsern und Geräten durchzuführen, kann mühsam und zeitraubend sein. Um dies effizient zu handhaben, sollten Sie sich mit Automatisierungstools vertraut machen. In diesem Artikel betrachten wir, was verfügbar ist, wie man Task-Runner verwendet, und wie man die Grundlagen kommerzieller Browser-Test-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_web_development/Extensions/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.f565372a.js"></script><link href="/static/css/main.3d9e7a02.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=" "><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">Build web projects usable for all</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="learn-button" class="top-level-entry menu-toggle" aria-controls="learn-menu" aria-expanded="false">Learn</button><a href="/de/docs/Learn_web_development" class="top-level-entry">Learn</a><ul id="learn-menu" class="submenu learn hidden inline-submenu-lg" aria-labelledby="learn-button"><li class="apis-link-container mobile-only "><a href="/de/docs/Learn_web_development" 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_web_development" 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_web_development/Core/Structuring_content" 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_web_development/Core/Styling_basics" 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_web_development/Core/Scripting" 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/Learn_web_development/Core/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_web_development%2FExtensions%2FTesting%2FAutomated_testing" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fde%2Fdocs%2FLearn_web_development%2FExtensions%2FTesting%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_web_development" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Lernen Sie Webentwicklung</span></a><meta property="position" content="1"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn_web_development/Extensions" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Erweiterungsmodule</span></a><meta property="position" content="2"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn_web_development/Extensions/Testing" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Testen</span></a><meta property="position" content="3"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn_web_development/Extensions/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_web_development/Extensions/Testing/Automated_testing" class="button submenu-item"><span>English (US)</span></a></li><li class=" "><a data-locale="ja" href="/ja/docs/Learn_web_development/Extensions/Testing/Automated_testing" class="button submenu-item"><span>日本語</span></a></li><li class=" "><a data-locale="zh-CN" href="/zh-CN/docs/Learn_web_development/Extensions/Testing/Automated_testing" class="button submenu-item"><span>中文 (简体)</span></a></li><li class=" "><a data-locale="zh-TW" href="/zh-TW/docs/Learn_web_development/Extensions/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"><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_erleichtert_die_arbeit">Automatisierung erleichtert die Arbeit</a></li><li class="document-toc-item "><a class="document-toc-link" href="#verwendung_eines_task-runners_zur_automatisierung_von_test-tools">Verwendung eines Task-Runners zur Automatisierung von Test-Tools</a></li><li class="document-toc-item "><a class="document-toc-link" href="#verwendung_kommerzieller_testdienste_zur_beschleunigung_von_browser-tests">Verwendung kommerzieller Testdienste zur Beschleunigung von Browser-Tests</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_web_development/Getting_started">Einstiegsmodule</a></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup">Umgebung einrichten</a></summary><ol><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software">Installation grundlegender Software</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web">Surfen im Web</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors">Code-Editor</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files">Umgang mit Dateien</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Command_line">Leitfaden für die Befehlszeilen-Einführung</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website">Ihre erste Website</a></summary><ol><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like">Wie wird Ihre Website aussehen?</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content">HTML: Erstellen der Inhalte</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content">CSS: Gestaltung des Inhalts</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity">JavaScript: Interaktivität hinzufügen</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website">Veröffentlichen Ihrer Website</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Getting_started/Web_standards">Webstandards</a></summary><ol><li><a href="/de/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works">How the web works</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model">Das Modell der Webstandards</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites">Wie Browser Websites laden</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills">Soziale Kompetenzen</a></summary><ol><li><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning">Forschung und Lernen</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork">Zusammenarbeit und Teamarbeit</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes">Workflows und Prozesse</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews">Erfolgreich in Vorstellungsgesprächen</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn_web_development/Core">Kernmodule</a></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Structuring_content">Inhalte mit HTML strukturieren</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax">Grundlegende HTML-Syntax</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata">Was befindet sich im Kopf? Metadaten einer Webseite</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs">Überschriften und Absätze in HTML</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance">Hervorhebung und Wichtigkeit</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Lists">Listen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Structuring_documents">Strukturierung von Dokumenten</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features">Erweiterte Textfunktionen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Creating_links">Erstellen von Links</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter">Herausforderung: Eine E-Mail korrekt auszeichnen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content">Herausforderung: Strukturierung einer Inhaltsseite</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/HTML_images">HTML-Bilder</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio">HTML video und audio</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page">Herausforderung: Mozilla Splash-Seite</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics">Grundlagen von HTML-Tabellen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Table_accessibility">Barrierefreiheit von HTML-Tabellen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Planet_data_table">Herausforderung: Strukturierung einer Planeten-Datentabelle</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/HTML_forms">Formulare und Schaltflächen in HTML</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML">Debugging von HTML</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Styling_basics">Grundlagen des CSS-Stylings</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/What_is_CSS">Was ist CSS?</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Getting_started">Einstieg in CSS</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page">Herausforderung: Gestaltung einer Biografie-Seite</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Basic_selectors">Grundlagen der CSS-Selektoren</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors">Attribut-Selektoren</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements">Pseudoklassen und Pseudoelemente</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Combinators">Kombinatoren</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Box_model">Das Box-Modell</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts">Umgang mit Konflikten</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Values_and_units">CSS-Werte und -Einheiten</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Sizing">Größenbestimmung von Elementen in CSS</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders">Hintergründe und Rahmen</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Overflow">Überlaufender Inhalt</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Images_media_forms">Bilder, Medien und Formularelemente</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Tables">Tabellen stylen</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS">Debugging CSS</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension">Herausforderung: Grundlegendes CSS-Verständnis</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper">Herausforderung: Erstellung eines ansprechenden Briefpapiers</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box">Herausforderung: Eine cool aussehende Box</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Text_styling">CSS-Textgestaltung</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Fundamentals">Grundlegendes zur Text- und Schriftgestaltung</a></li><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Styling_lists">Listen gestalten</a></li><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Styling_links">Gestaltung von Links</a></li><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Web_fonts">Webfonts</a></li><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage">Herausforderung: Setzen einer Startseite für eine Gemeinschaftsschule</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/CSS_layout">CSS-Layout</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Introduction">Einführung in CSS-Layout</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Floats">Floats</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Positioning">Platzierung</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Flexbox">Flexbox</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Grids">CSS-Grid-Layout</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Responsive_Design">Responsives Design</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Media_queries">Grundlagen von Media Query</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension">Herausforderung: Grundlegendes Verständnis von Layouts</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Scripting">Dynamisches Scripting mit JavaScript</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Scripting/What_is_JavaScript">Was ist JavaScript?</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/A_first_splash">Erster Einblick in JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/What_went_wrong">Was ist schiefgelaufen? JavaScript-Fehlerbehebung</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Variables">Speichern der benötigten Informationen — Variablen</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Math">Grundlegende Mathematik in JavaScript – Zahlen und Operatoren</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Strings">Umgang mit Text — Zeichenketten in JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Useful_string_methods">Nützliche String-Methoden</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Arrays">Arrays</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Silly_story_generator">Herausforderung: Blödsinnige Geschichtengenerator</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Conditionals">Entscheidungen in Ihrem Code treffen — Konditionalen</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Loops">Code-Schleifen</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Functions">Funktionen — wiederverwendbare Codeblöcke</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Build_your_own_function">Erstellen Sie Ihre eigene Funktion</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Return_values">Funktionsrückgabewerte</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Events">Einführung in Ereignisse</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Event_bubbling">Ereignis-Bubbling</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Image_gallery">Herausforderung: Bildergalerie</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Object_basics">JavaScript-Objektgrundlagen</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/DOM_scripting">Einführung in DOM-Scripting</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Network_requests">Netzwerkanfragen mit JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/JSON">Arbeiten mit JSON</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript">Debugging JavaScript and handling errors</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries">JavaScript-Frameworks und -Bibliotheken</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/Introduction">Einführung in client-seitige Frameworks</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/Main_features">Hauptmerkmale von Frameworks</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started">Erste Schritte mit React</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning">Beginn unserer React To-Do-Liste</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_components">Komponenten in unserer React-App erstellen</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state">React Interaktivität: Events und State</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering">Reaktivität in React: Bearbeiten, Filtern, bedingtes Rendern</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility">Barrierefreiheit in React</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_resources">React-Ressourcen</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Accessibility">Barrierefreiheit</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Accessibility/What_is_accessibility">Was ist Barrierefreiheit?</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/Tooling">Barrierefreiheitstools und unterstützende Technologien</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/HTML">HTML: Eine gute Grundlage für Barrierefreiheit</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript">CSS and JavaScript Zugänglichkeitsbest Practices</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics">WAI-ARIA Grundlagen</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/Multimedia">Barrierefreie Multimedia-Inhalte</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/Mobile">Mobile Accessibility</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting">Herausforderung: Barrierefreiheits-Fehlerbehebung</a></li></ol></details></li><li><a href="/de/docs/Learn_web_development/Core/Design_for_developers">Design für Entwickler:innen</a></li><li><a href="/de/docs/Learn_web_development/Core/Version_control">Versionskontrolle</a></li><li class="section"><a href="/de/docs/Learn_web_development/Extensions">Erweiterungsmodule</a></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects">Advanced JavaScript objects</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes">Objektprototypen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming">Objektorientierte Programmierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript">Klassen in JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice">Objektbaupraxis</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features">Herausforderung: Hinzufügen von Funktionen zu unserem hüpfenden Ball-Demo</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs">Client-seitige Web-APIs</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction">Einführung in Web-APIs</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs">Video- und Audio-APIs</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics">Zeichnen von Grafiken</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage">Client-seitiger Speicher</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs">Third-party APIs</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Async_JS">Asynchrones JavaScript</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Introducing">Einführung in asynchrones JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Promises">Anleitung zur Verwendung von Promises</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API">Wie man eine Promise-basierte API implementiert</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers">Einführung in Worker</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations">Herausforderung: Animationen sequenzieren</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Forms">Webformulare — Arbeiten mit Benutzerdaten</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Your_first_form">Ihr erstes Formular</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form">Wie man ein Webformular strukturiert</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls">Grundlegende native Formularsteuerungen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/HTML5_input_types">Die HTML5-Eingabetypen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Other_form_controls">Andere Formularelemente</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Styling_web_forms">Styling von Webformularen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling">Fortgeschrittenes Formular-Styling</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes">UI-Pseudoklassen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Form_validation">Client-seitige Formularvalidierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data">Senden von Formulardaten</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools">Verständnis für clientseitige Tools</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Overview">Überblick über Client-seitige Tools</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Package_management">Grundlagen des Paketmanagements</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain">Einführung in eine vollständige Werkzeugkette</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Deployment">Bereitstellung unserer App</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Server-side">Serverseitige Programmierung</a></summary><ol><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps">Erste Schritte auf der Serverseite</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction">Einführung in die Server-Seite</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview">Überblick über Client-Server</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks">Server-seitige Web-Frameworks</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security">Website-Sicherheit</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django">Django Web-Framework (Python)</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Introduction">Einführung in Django</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/development_environment">Einrichten einer Django-Entwicklungsumgebung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website">Django Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website">Django-Tutorial Teil 2: Erstellen einer Skelett-Website</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Models">Django Tutorial Teil 3: Verwenden von Modellen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site">Django Tutorial Teil 4: Die Django Admin-Seite</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Home_page">Django Tutorial Teil 5: Erstellen unserer Homepage</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views">Django Tutorial Teil 6: Generische Listen- und Detailansichten</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Sessions">Django-Tutorial Teil 7: Sitzungs-Framework</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Authentication">Django-Tutorial Teil 8: Benutzer-Authentifizierung und -Berechtigungen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Forms">Django Tutorial Teil 9: Arbeiten mit Formularen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Testing">Django Tutorial Teil 10: Testen einer Django-Webanwendung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Deployment">Django-Tutorial Teil 11: Bereitstellung von Django für die Produktion</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security">Django Webanwendungssicherheit</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog">Bewertung: DIY Django Mini-Blog</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs">Express Web-Framework (Node.js)</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction">Einführung in Express/Node</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment">Einrichten einer Node-Entwicklungsumgebung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website">Express-Tutorial Teil 2: Erstellen einer Skelett-Website</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose">Express-Tutorial Teil 3: Verwendung einer Datenbank (mit Mongoose)</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes">Express Tutorial Teil 4: Routen und Controller</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Teil 5: Bibliotheksdaten anzeigen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms">Express Tutorial Teil 6: Arbeiten mit Formularen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment">Express Tutorial Teil 7: Bereitstellung im Produktionsumfeld</a></li></ol></details></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Performance">Web-Performance</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Performance/why_web_performance">Das "Warum" der Web-Performance</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/What_is_web_performance">Was ist Web-Performance?</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/Perceived_performance">Wahrgenommene Leistung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/Measuring_performance">Leistungsmessung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/Multimedia">Multimedia: Bilder</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/video">Multimedia: video</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/JavaScript">JavaScript-Leistungsoptimierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/HTML">HTML-Performance-Optimierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/CSS">CSS-Leistungsoptimierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/business_case_for_performance">Der geschäftliche Nutzen der Web-Performance</a></li></ol></details></li><li class="toggle"><details open=""><summary><a href="/de/docs/Learn_web_development/Extensions/Testing">Tests</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Introduction">Einführung in das Cross-Browser-Testing</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Testing_strategies">Strategien zur Durchführung von Tests</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS">Umgang mit häufigen HTML- und CSS-Problemen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Feature_detection">Implementierung der Funktionsprüfung</a></li><li><em><a href="/de/docs/Learn_web_development/Extensions/Testing/Automated_testing" aria-current="page">Einführung in automatisiertes Testen</a></em></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment">Einrichtung Ihrer eigenen Testautomatisierungsumgebung</a></li></ol></details></li><li><a href="/de/docs/Learn_web_development/Extensions/Transform_animate">CSS transformieren und animieren</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Security_privacy">Sicherheit und Datenschutz</a></li><li class="section">Weitere Ressourcen</li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Howto">Häufige Probleme lösen</a></summary><ol><li><a href="/de/docs/Learn_web_development/Howto/Solve_HTML_problems">Häufige HTML-Probleme lösen</a></li><li><a href="/de/docs/Learn_web_development/Howto/Solve_CSS_problems">Häufige CSS-Probleme lösen</a></li><li><a href="/de/docs/Learn_web_development/Howto/Solve_JavaScript_problems">Häufige JavaScript-Probleme lösen</a></li><li><a href="/de/docs/Learn_web_development/Howto/Web_mechanics">Webmechanik</a></li><li><a href="/de/docs/Learn_web_development/Howto/Tools_and_setup">Tools und Einrichtung</a></li><li><a href="/de/docs/Learn_web_development/Howto/Design_and_accessibility">Design und Barrierefreiheit</a></li></ol></details></li><li><a href="/de/docs/Learn_web_development/About">Über</a></li><li><a href="/de/docs/Learn_web_development/Educators">Ressourcen für Lehrkräfte</a></li><li><a href="/de/docs/Learn_web_development/Changelog">Änderungsprotokoll</a></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_erleichtert_die_arbeit">Automatisierung erleichtert die Arbeit</a></li><li class="document-toc-item "><a class="document-toc-link" href="#verwendung_eines_task-runners_zur_automatisierung_von_test-tools">Verwendung eines Task-Runners zur Automatisierung von Test-Tools</a></li><li class="document-toc-item "><a class="document-toc-link" href="#verwendung_kommerzieller_testdienste_zur_beschleunigung_von_browser-tests">Verwendung kommerzieller Testdienste zur Beschleunigung von Browser-Tests</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_web_development/Extensions/Testing/Feature_detection"><span class="button-wrap"> Zurück </span></a></li><li><a class="button secondary" href="/de/docs/Learn_web_development/Extensions/Testing"><span class="button-wrap"> Übersicht: Testen</span></a></li><li><a class="button secondary" href="/de/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment"><span class="button-wrap"> Weiter </span></a></li></ul> <p>Mehrmals täglich Tests manuell auf verschiedenen Browsern und Geräten durchzuführen, kann mühsam und zeitraubend sein. Um dies effizient zu handhaben, sollten Sie sich mit Automatisierungstools vertraut machen. In diesem Artikel betrachten wir, was verfügbar ist, wie man Task-Runner verwendet, und wie man die Grundlagen kommerzieller Browser-Test-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 Kernsprachen <a href="/de/docs/Learn_web_development/Core/Structuring_content">HTML</a>, <a href="/de/docs/Learn_web_development/Core/Styling_basics">CSS</a> und <a href="/de/docs/Learn_web_development/Core/Scripting">JavaScript</a>; eine Vorstellung von den grundlegenden <a href="/de/docs/Learn_web_development/Extensions/Testing/Introduction">Prinzipien des plattformübergreifenden Testens</a>. </td> </tr> <tr> <th scope="row">Ziel:</th> <td> Ein Verständnis dafür zu vermitteln, was automatisiertes Testen umfasst, wie es Ihr Leben erleichtern kann und wie Sie einige der kommerziellen Produkte nutzen können, die das Ganze erleichtern. </td> </tr> </tbody> </table></figure></div><section aria-labelledby="automatisierung_erleichtert_die_arbeit"><h2 id="automatisierung_erleichtert_die_arbeit"><a href="#automatisierung_erleichtert_die_arbeit">Automatisierung erleichtert die Arbeit</a></h2><div class="section-content"><p>In diesem Modul haben wir viele verschiedene Möglichkeiten detailliert beschrieben, wie Sie Ihre Websites und Apps testen können, und den Umfang erläutert, den Ihr plattformübergreifendes Testen in Bezug auf zu testende Browser, Barrierefreiheitsbetrachtungen und mehr haben sollte. Klingt nach viel Arbeit, nicht wahr?</p> <p>Wir stimmen zu — alle Punkte, die wir in früheren Artikeln betrachtet haben, manuell zu testen, kann wirklich belastend sein. Glücklicherweise gibt es Tools, die uns helfen, einen Teil dieser Belastung zu automatisieren. Es gibt zwei Hauptwege, wie wir die in diesem Modul besprochenen Tests automatisieren können:</p> <ol> <li>Verwenden Sie einen Task-Runner wie <a href="https://gruntjs.com/" class="external" target="_blank">Grunt</a> oder <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-Skripte</a>, um Tests durchzuführen und Code während Ihres Build-Prozesses zu bereinigen. Dies ist eine großartige Möglichkeit, um Aufgaben wie Linting und Code-Minifizierung zu automatisieren, CSS-Präfixe hinzuzufügen oder aufkommende JavaScript-Funktionen für maximale plattformübergreifende 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 auf installierten Browsern durchzuführen und Ergebnisse zurückzugeben, die Sie auf Fehler in den Browsern aufmerksam machen, sobald sie auftreten. Kommerzielle plattformübergreifende Test-Apps 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, ermöglichen Ihnen jedoch den Remote-Zugriff auf deren Einrichtung über eine Oberfläche, wodurch Sie sich die Einrichtung Ihres eigenen Testsystems ersparen.</li> </ol> <p>Wir werden im nächsten Artikel darauf eingehen, wie Sie Ihr eigenes auf Selenium basierendes Testsystem einrichten können. In diesem Artikel schauen wir uns an, wie man einen Task-Runner einrichtet und die grundlegende Funktionalität kommerzieller Systeme wie die oben genannten nutzt.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Die beiden oben genannten Kategorien schließen sich nicht gegenseitig aus. Es ist möglich, einen Task-Runner einzurichten, um über eine API auf einen Dienst wie Sauce Labs oder LambdaTest zuzugreifen, plattformübergreifende Tests durchzuführen und Ergebnisse zurückzugeben. Dies werden wir unten ebenfalls betrachten.</p> </div></div></section><section aria-labelledby="verwendung_eines_task-runners_zur_automatisierung_von_test-tools"><h2 id="verwendung_eines_task-runners_zur_automatisierung_von_test-tools"><a href="#verwendung_eines_task-runners_zur_automatisierung_von_test-tools">Verwendung eines Task-Runners zur Automatisierung von Test-Tools</a></h2><div class="section-content"><p>Wie bereits erwähnt, können Sie durch die Verwendung eines Task-Runners zur automatisierten Durchführung aller benötigten Aufgaben in einem bestimmten Punkt Ihres Build-Prozesses die Ausführung häufiger Aufgaben wie Linting und Minifizierung von Code erheblich beschleunigen. Beispielsweise könnte dies jedes Mal geschehen, wenn Sie eine Datei speichern oder an einem anderen Punkt. In diesem Abschnitt sehen wir uns an, wie man die Ausführung von Aufgaben mit Node und Gulp automatisiert, einer anfängerfreundlichen Option.</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 basieren heutzutage auf <a href="/de/docs/Glossary/Node.js">Node.js</a>, sodass Sie es zusammen mit seinem zugehörigen Paketmanager, <a href="https://www.npmjs.com/" class="external" target="_blank"><code>npm</code></a>, installieren müssen:</p> <ol> <li>Der einfachste Weg, Node.js und <code>npm</code> zu installieren und zu aktualisieren, ist über einen Node-Version-Manager: Folgen Sie den Anweisungen unter <a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment#installing_node">Node installieren</a>.</li> <li>Stellen Sie sicher, dass Sie <a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment#testing_your_nodejs_and_npm_installation">testen, ob Ihre Installation erfolgreich war</a>, bevor Sie fortfahren.</li> <li>Wenn Sie Node.js/<code>npm</code> bereits installiert haben, sollten Sie diese auf die neuesten Versionen aktualisieren. Dies kann durch die Installation der neuesten LTS-Versionen mithilfe des Node-Version-Managers erfolgen (siehe nochmals 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. Das ist einfach zu bewerkstelligen.</p> <p>Beispielsweise erstellen wir zunächst ein Testverzeichnis, in dem wir spielen können, ohne irgendetwas kaputt zu machen.</p> <ol> <li> <p>Erstellen Sie ein neues Verzeichnis an einem sinnvollen Ort mit der Benutzeroberfläche Ihres Dateimanagers oder navigieren Sie auf der Befehlszeile zu dem gewünschten Speicherort und führen Sie den folgenden Befehl aus:</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 wechseln und es mit folgendem Befehl initialisieren:</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 für den Moment einfach die Standardwerte auswählen.</p> </li> <li> <p>Nachdem alle Fragen gestellt wurden, wird gefragt, ob die eingegebenen Informationen in Ordnung sind. Geben Sie <code>yes</code> ein und drücken Sie Enter/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 für den Moment sieht sie ungefähr so aus:</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 können Sie weitermachen.</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>Schauen wir uns die Einrichtung von Gulp an und wie man es nutzt, um einige Test-Tools zu automatisieren.</p> <ol> <li> <p>Zunächst erstellen Sie ein npm-Testprojekt gemäß der am Ende des vorherigen Abschnitts beschriebenen Vorgehensweise. 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 Beispiel-Inhalte in HTML, CSS und JavaScript, um Ihr System zu testen — erstellen Sie Kopien unserer Beispiel-<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>-Dateien in einem Unterordner mit dem Namen <code>src</code> in Ihrem Projektordner. Sie können auch Ihre eigenen Testinhalte ausprobieren, beachten Sie jedoch, dass solche Tools nicht mit internen JS/CSS arbeiten — 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 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 --global gulp-cli </code></pre></div> </li> <li> <p>Führen Sie anschließend 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>. Diese Datei wird alle unsere Aufgaben ausführen. Geben 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>Dies erfordert das zuvor installierte <code>gulp</code>-Modul und exportiert dann eine Standardaufgabe, die nichts weiter tut, als eine Nachricht im Terminal auszugeben — dies ist nützlich, um uns zu informieren, dass Gulp funktioniert. Jede Gulp-Aufgabe wird im gleichen Grundformat exportiert — <code>exports.taskName = taskFunction</code>. Jede Funktion nimmt einen Parameter — einen Callback, der ausgeführt wird, wenn die Aufgabe abgeschlossen ist.</p> </li> <li> <p>Sie können die Standardaufgabe 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="hinzufügen_einiger_realer_aufgaben_zu_gulp"><h3 id="hinzufügen_einiger_realer_aufgaben_zu_gulp"><a href="#hinzufügen_einiger_realer_aufgaben_zu_gulp">Hinzufügen einiger realer Aufgaben zu Gulp</a></h3><div class="section-content"><p>Um einige reale Aufgaben zu Gulp hinzuzufügen, müssen wir überlegen, was wir tun wollen. Ein vernünftiges Set an Basisfunktionen für unser Projekt könnte sein:</p> <ul> <li>html-tidy, css-lint und js-hint, um häufige HTML/CSS/JS-Fehler zu überprüfen und zu beheben (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 nur dort Anbieterpräfixe hinzuzufügen, wo es benötigt wird (siehe <a href="https://www.npmjs.com/package/gulp-autoprefixer" class="external" target="_blank">gulp-autoprefixer</a>).</li> <li>babel, um neue JavaScript-Syntaxmerkmale in traditionelle Syntax umzuwandeln, 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 zunächst über npm installieren, dann alle Abhängigkeiten am Anfang der <code>gulpfile.js</code>-Datei einfügen, dann Ihren Test/die Tests am Ende einfügen und schließlich den Namen Ihrer Aufgabe exportieren, um über den Befehl von Gulp verfügbar zu sein.</p> <h4 id="html-tidy">html-tidy</h4> <ol> <li> <p>Installieren Sie es 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 --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 die <code>package.json</code>-Datei Ihres Projekts schauen, werden Sie einen Eintrag dafür in der Eigenschaft <code>devDependencies</code> 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 an das 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 erfassen wir unsere Entwicklungs-<code>index.html</code>-Datei mit <code>gulp.src()</code>, das es uns ermöglicht, eine Quelldatei zu erfassen, um etwas damit zu machen.</p> <p>Wir verwenden dann die Funktion <code>pipe()</code>, um diese Quelle an einen anderen Befehl weiterzugeben, um etwas anderes damit zu tun. Wir können so viele davon hintereinander schalten, wie wir wollen. Zuerst führen wir <code>htmltidy()</code> auf der Quelle aus, das durchgeht und Fehler in unserer Datei behebt. Die zweite <code>pipe()</code>-Funktion schreibt die Ausgabedatei HTML in das <code>build</code>-Verzeichnis.</p> <p>In der Eingangs-Version der Datei haben Sie vielleicht bemerkt, dass wir ein leeres <a href="/de/docs/Web/HTML/Element/p"><code><p></code></a>-Element eingefügt haben; htmltidy hat dies bis zur Erstellung der Ausgabedatei entfernt.</p> <h4 id="autoprefixer_und_css-lint">Autoprefixer und css-lint</h4> <ol> <li> <p>Installieren Sie es mit den folgenden Befehlen:</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 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 autoprefixer from "gulp-autoprefixer"; import csslint from "gulp-csslint"; </code></pre></div> </li> <li> <p>Fügen Sie den folgenden Test an das 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 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 greifen wir auf unsere <code>style.css</code>-Datei zu, führen csslint darauf aus (was eine Liste von Fehlern in Ihrem CSS im Terminal ausgibt), und führen es dann durch autoprefixer, um Präfixe hinzuzufügen, die erforderlich sind, um aufkeimende CSS-Funktionen in älteren Browsern lauffähig zu machen. Am Ende der Pipe-Kette geben wir unser modifiziertes CSS mit Präfixen in das <code>build</code>-Verzeichnis aus. Beachten Sie, dass dies nur funktioniert, wenn csslint keine Fehler findet — versuchen Sie, eine geschweifte Klammer aus Ihrer CSS-Datei zu entfernen und Gulp 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 Befehlen:</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 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 babel from "gulp-babel"; import jshint from "gulp-jshint"; </code></pre></div> </li> <li> <p>Fügen Sie den folgenden Test an das 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 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 greifen wir auf unsere <code>main.js</code>-Datei zu, führen <code>jshint</code> darauf aus und geben die Ergebnisse mit <code>jshint.reporter</code> im Terminal aus; wir übergeben die Datei dann an babel, das sie in eine alte Syntax konvertiert 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">Pfeilfunktion</a>, die babel in eine alte Funktionssyntax umgewandelt hat.</p> <h4 id="weitere_ideen">Weitere Ideen</h4> <p>Sobald dies alles eingerichtet ist, können Sie den <code>gulp</code>-Befehl in Ihrem Projektverzeichnis ausführen, und Sie sollten eine Ausgabe wie diese erhalten:</p> <p><img src="/de/docs/Learn_web_development/Extensions/Testing/Automated_testing/gulp-output.png" alt="Ausgabe in einem Code-Editor, wo Zeilen die Zeit der Start- oder Endaufgaben, den Aufgabennamen und die Dauer von 'Fertig' Aufgaben anzeigen." width="697" height="478" loading="lazy"></p> <p>Sie können dann die von Ihren automatisierten Aufgaben erzeugten Dateien testen, indem Sie sie im <code>build</code>-Verzeichnis anschauen und <code>build/index.html</code> in Ihrem Webbrowser laden.</p> <p>Wenn Sie Fehler erhalten, überprüfen Sie, ob Sie alle Abhängigkeiten und die Tests wie oben gezeigt hinzugefügt haben; versuchen Sie auch, die Abschnitte des HTML/CSS/JavaScript-Codes auszukommentieren und dann Gulp erneut auszuführen, um zu sehen, ob Sie das Problem isolieren können.</p> <p>Gulp verfügt über eine <code>watch()</code>-Funktion, die Sie verwenden können, um Ihre Dateien zu überwachen und Tests auszuführen, wann immer Sie eine Datei speichern. Versuchen Sie beispielsweise, das folgende Kommando 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 jetzt, den Befehl <code>gulp watch</code> in Ihr Terminal einzugeben. Gulp überwacht nun Ihr Verzeichnis und führt die entsprechenden Aufgaben aus, 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 eine Datei diesen Typs gespeichert wird". Sie könnten Platzhalter auch in Ihren Hauptaufgaben verwenden, z. B. <code>gulp.src('src/*.css')</code> würde alle Ihre CSS-Dateien erfassen und dann gepipte Aufgaben darauf ausführen.</p> </div> <p>Mit Gulp können Sie noch viel mehr machen. 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. Wir wollen sicherlich nicht sagen, dass Gulp die beste Lösung ist, aber es funktioniert für uns und ist für Anfänger ziemlich zugänglich. Sie könnten auch andere Lösungen ausprobieren:</p> <ul> <li>Grunt funktioniert auf eine sehr ähnliche Weise wie Gulp, außer dass es sich auf in einer Konfigurationsdatei spezifizierte Aufgaben stützt anstatt auf geschriebenen JavaScript. Siehe <a href="https://gruntjs.com/getting-started" class="external" target="_blank">Erste Schritte mit Grunt für weitere Details.</a></li> <li>Sie können Aufgaben direkt mit npm-Skripten, die sich in Ihrer <code>package.json</code>-Datei befinden, ausführen, ohne ein zusätzliches Task-Runner-System installieren zu müssen. Dieses Prinzip arbeitet auf der Prämisse, dass Gulp-Plugins im Wesentlichen Wrapper um Befehlszeilentools sind. Wenn Sie also herausfinden, wie Sie die Tools über die Befehlszeile ausführen, können Sie sie dann mit npm-Skripten ausführen. Es ist etwas schwieriger zu arbeiten, kann aber lohnend für diejenigen sein, die gute Kenntnisse in der Befehlszeile haben. <a href="https://css-tricks.com/why-npm-scripts/" class="external" target="_blank">Warum npm-Skripte?</a> bietet eine gute Einführung mit einer Menge weiterer Informationen.</li> </ul></div></section><section aria-labelledby="verwendung_kommerzieller_testdienste_zur_beschleunigung_von_browser-tests"><h2 id="verwendung_kommerzieller_testdienste_zur_beschleunigung_von_browser-tests"><a href="#verwendung_kommerzieller_testdienste_zur_beschleunigung_von_browser-tests">Verwendung kommerzieller Testdienste zur Beschleunigung von Browser-Tests</a></h2><div class="section-content"><p>Schauen wir nun auf kommerzielle Browser-Testdienste von Drittanbietern und was sie für uns tun können.</p> <p>Wenn Sie diese Arten von Diensten verwenden, geben Sie eine URL der Seite an, die Sie testen möchten, zusammen mit Informationen darüber, in welchen Browsern Sie sie testen möchten. Die App konfiguriert dann ein neues VM mit dem von Ihnen angegebenen Betriebssystem und Browser und gibt die Testergebnisse in Form von Screenshots, Videos, Protokolldateien, Text usw. zurück. Dies ist sehr nützlich und viel bequemer als alle OS/Browtersucher-Kombinationen selbst einrichten zu müssen.</p> <p>Sie können dann eine Stufe höher gehen, indem Sie über eine API programmgesteuerten Zugriff auf die Funktionalität erhalten, was bedeutet, dass solche Apps mit Task-Runner, wie Ihren eigenen lokalen Selenium-Umgebungen und anderen Tools kombiniert werden können, um automatisierte Tests zu erstellen.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Es gibt andere kommerzielle Browser-Testsysteme, aber in diesem Artikel konzentrieren wir uns auf BrowserStack, Sauce Labs und TestingBot. Wir sagen nicht, dass dies unbedingt die besten verfügbaren Tools sind, aber sie sind gute Tools, die für Anfänger einfach einzurichten sind.</p> </div></div></section><section aria-labelledby="browserstack"><h3 id="browserstack"><a href="#browserstack">BrowserStack</a></h3><div class="section-content"><h4 id="erste_schritte_mit_browserstack">Erste Schritte mit BrowserStack</h4> <p>Um zu beginnen:</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 im oberen Navigationsmenü auf den Link <em>Live</em>, um zu Live Manual Testing zu wechseln.</li> </ol> <h4 id="die_grundlagen_manuelle_tests">Die Grundlagen: Manuelle Tests</h4> <p>Das BrowserStack Live-Dashboard ermöglicht es Ihnen, auszuwählen, welches Gerät und welchen 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 verfügbaren Browser auf diesem Gerät anzuzeigen.</p> <p><img src="/de/docs/Learn_web_development/Extensions/Testing/Automated_testing/browserstack-test-choices-sized.png" alt="Testauswahl" width="1000" height="482" loading="lazy"></p> <p>Ein Klick auf eines dieser Browser-Symbole lädt Ihr gewünschtes Plattform-, Geräte- und Browserprogramm — wählen Sie eines aus und probieren Sie es aus.</p> <p><img src="/de/docs/Learn_web_development/Extensions/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 verwenden (z. B. Pinch/Zoom, zwei Finger zum Scrollen) auf den Touchpads von unterstützenden Geräten wie MacBooks. Nicht alle Funktionen sind auf allen Geräten verfügbar.</p> <p>Sie sehen auch ein Menü, mit dem Sie die Sitzung steuern können.</p> <p><img src="/de/docs/Learn_web_development/Extensions/Testing/Automated_testing/browserstack-test-menu-sized.png" alt="Testmenü" width="180" height="519" loading="lazy"></p> <p>Die verfügbaren Funktionen variieren je nachdem, welcher Browser geladen ist, und können Steuerungen für Folgendes umfassen:</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 Zoomlevels und Umschalten der Orientierung</li> <li>Speichern und Laden von Bookmarks</li> <li>Erfassen/Kommentieren von Screenshots und Einreichen von Fehlerberichten</li> <li>Zugriff auf Browser DevTools</li> <li>Ändern des gemeldeten Standorts</li> <li>Drosselung des Netzwerks</li> <li>Zugriff auf Bildschirmlesegeräte</li> </ul> <h4 id="fortschrittlich_die_browserstack_api">Fortschrittlich: Die BrowserStack API</h4> <p>BrowserStack hat eine <a href="https://www.browserstack.com/docs/automate/api-reference/selenium/introduction" class="external" target="_blank">restful API</a>, die es ermöglicht, programmgesteuert Details Ihres Kontos, Ihrer Sitzungen, Builds usw. abzurufen.</p> <p>Schauen wir uns kurz an, wie wir über Node.js auf die API zugreifen könnten.</p> <ol> <li> <p>Richten Sie zuerst ein neues npm-Projekt ein, um dies zu testen, wie unter <a href="#einrichtung_von_node_und_npm">Einstellung von Node und npm</a> beschrieben. Verwenden Sie einen anderen Verzeichnisnamen als zuvor, z. B. <code>bstack-test</code>.</p> </li> <li> <p>Erstellen Sie eine neue Datei im Stamm Ihres Projekts mit dem Namen <code>call_bstack.js</code> und geben Sie 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 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 den BrowserStack-Benutzernamen und den Zugriffsschlüssel durch Ihre tatsächlichen Werte. Diese können aus Ihren <a href="https://www.browserstack.com/accounts/profile/details" class="external" target="_blank">BrowserStack Account & Profile Details</a> unter dem Abschnitt <em>Authentication & Security</em> abgerufen werden.</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 das Senden von HTTP-Anfragen zu behandeln, indem Sie den folgenden Befehl in Ihrem Terminal ausführen (wir haben uns für axios entschieden, 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 im Terminal ein Objekt 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>Im Folgenden haben wir weitere fertige Funktionen bereitgestellt, die Sie möglicherweise nützlich finden, wenn Sie mit der Ruhe-API von BrowserStack arbeiten.</p> <p>Diese Funktion gibt Zusammenfassungsdetails aller zuvor erstellten automatisierten Builds zurück (finden Sie mehr Details zu automatisierten Tests von BrowserStack im nächsten Artikel unter <a href="/de/docs/Learn_web_development/Extensions/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 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="fortschrittlich_automatisierte_tests">Fortschrittlich: Automatisierte Tests</h4> <p>Wir werden das <a href="/de/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment#browserstack">Ausführen automatisierter 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="erste_schritte_mit_sauce_labs">Erste Schritte mit 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 Optionen. Stellen Sie vorerst sicher, dass Sie in der Registerkarte <em>Manual 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 einer Seite ein, die Sie testen möchten (verwenden Sie beispielsweise <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>), und wählen Sie dann eine Browser-/Betriebssystemkombination aus, die Sie testen möchten, indem Sie die verschiedenen Schaltflächen und Listen verwenden. Es gibt viel Auswahl, wie Sie sehen werden!!<img src="/de/docs/Learn_web_development/Extensions/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 Start session klicken, erscheint ein Ladescreen, der eine virtuelle Maschine mit der von Ihnen gewählten Kombination aufbaut.</p> </li> <li> <p>Wenn das Laden abgeschlossen ist, können Sie die Webseite, die im ausgewählten Browser ausgeführt wird, fernsteuern und testen.<img src="/de/docs/Learn_web_development/Extensions/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 sehen, wie es im Browser, den Sie testen, aussehen würde, sich mit der Maus bewegen und versuchen, auf Schaltflächen zu klicken usw. Das obere Menü ermöglicht es 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 zu kopieren.</li> <li>Einen Screenshot zu machen.</li> <li>Im Vollbildmodus zu testen.</li> </ul> </li> </ol> <p>Sobald Sie die Sitzung beenden, kehren Sie zur Registerkarte Manual Tests zurück, wo Sie einen Eintrag für jede der vorher gestarteten manuellen Sitzungen sehen. Durch Klicken auf einen dieser Einträge werden weitere Daten für die Sitzung angezeigt. Hier können Sie Screenshots, die Sie gemacht haben, herunterladen, ein Video der Sitzung ansehen, Datenprotokolle einsehen und mehr.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Dies ist bereits sehr nützlich und viel bequemer, als all diese Emulatoren und virtuellen Maschinen selbst einrichten zu müssen.</p> </div> <h4 id="fortschrittlich_die_sauce_labs_api">Fortschrittlich: 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 Sie in die Lage versetzt, Details Ihres Kontos und bestehender Tests programmgesteuert abzurufen und Tests mit weiteren Details zu versehen, wie z. B. ihrem Erfolgs-/Fehlerzustand, der durch manuelles Testen allein nicht aufgezeichnet werden kann. Beispielsweise könnten Sie einen Ihrer eigenen Selenium-Tests mit Sauce Labs remote ausführen, um eine bestimmte Browser-/Betriebssystemkombination zu testen, und dann die Testergebnisse an Sauce Labs zurückgeben.</p> <p>Es hat mehrere Clients zur Verfügung, die es Ihnen ermöglichen, Aufrufe der API unter Verwendung Ihrer bevorzugten Umgebung, sei es PHP, Java, Node.js usw., zu tätigen.</p> <p>Schauen wir uns kurz an, wie wir über Node.js und <a href="https://github.com/saucelabs/node-saucelabs" class="external" target="_blank">node-saucelabs</a> auf die API zugreifen würden.</p> <ol> <li> <p>Richten Sie zuerst ein neues npm-Projekt ein, um dies zu testen, wie unter <a href="#einrichtung_von_node_und_npm">Einstellung von Node und npm</a> beschrieben. Verwenden Sie einen anderen Verzeichnisnamen als zuvor, z. B. <code>sauce-test</code>.</p> </li> <li> <p>Installieren Sie den Node Sauce Labs 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 saucelabs </code></pre></div> </li> <li> <p>Erstellen Sie eine neue Datei im Stamm Ihres Projekts mit dem Namen <code>call_sauce.js</code>. 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 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 den API-Schlüssel an den angegebenen Stellen eingeben. 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 dies jetzt aus.</p> </li> <li> <p>Stellen Sie sicher, dass alles gespeichert ist, und führen Sie Ihre Datei wie folgt 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="fortschrittlich_automatisierte_tests_2">Fortschrittlich: Automatisierte Tests</h4> <p>Wir werden das tatsächliche 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="erste_schritte_mit_testingbot">Erste Schritte mit 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 geschehen, nachdem Sie Ihre E-Mail-Adresse bestätigt haben.</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, die Sie auswählen können. Stellen Sie vorerst sicher, dass Sie auf der Registerkarte <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, die Sie testen möchten, indem Sie die Kombination im Raster auswählen. <img src="/de/docs/Learn_web_development/Extensions/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, erscheint ein Ladescreen, der eine virtuelle Maschine mit der von Ihnen gewählten Kombination aufbaut.</p> </li> <li> <p>Wenn das Laden abgeschlossen ist, können Sie die Webseite, die im gewählten Browser läuft, remote testen.</p> </li> <li> <p>Von hier aus können Sie das Layout sehen, wie es im Browser, den Sie testen, aussehen würde, sich mit der Maus bewegen und versuchen, auf Schaltflächen zu klicken usw. Das seitliche Menü ermöglicht es 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 zu testen.</li> </ul> </li> </ol> <p>Sobald Sie die Sitzung beenden, kehren Sie zur Seite <em>Live Web Testing</em> zurück, wo Sie einen Eintrag für jede der vorher gestarteten manuellen Sitzungen sehen. Durch Klicken auf einen dieser Einträge werden weitere Daten für die Sitzung angezeigt. Hier können Sie alle gemachten Screenshots herunterladen, ein Video des Tests ansehen und Protokolle für die Sitzung einsehen.</p> <h4 id="fortschrittlich_die_testingbot_api">Fortschrittlich: Die TestingBot API</h4> <p>TestingBot verfügt über eine <a href="https://testingbot.com/support/api" class="external" target="_blank">restful API</a>, die es ermöglicht, programmgesteuert Details Ihres Kontos und bestehender Tests abzurufen und Tests mit weiteren Details zu versehen, wie z. B. ihrem Erfolgs-/Fehlerzustand, der durch manuelles Testen allein nicht aufgezeichnet werden kann.</p> <p>TestingBot hat mehrere API-Clients, die Sie zur Interaktion mit der API verwenden können, darunter Clients für NodeJS, Python, Ruby, Java und PHP.</p> <p>Unten finden Sie ein Beispiel, wie Sie mit dem TestingBot API JavaScript-Client <a href="https://www.npmjs.com/package/testingbot-api" class="external" target="_blank">testingbot-api</a> mit dem API interagieren können.</p> <ol> <li> <p>Richten Sie zuerst ein neues npm-Projekt ein, um dies zu testen, wie unter <a href="#einrichtung_von_node_und_npm">Einstellung von Node und npm</a> beschrieben. Verwenden Sie einen anderen Verzeichnisnamen als zuvor, z. B. <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 Stamm Ihres Projekts mit dem Namen <code>tb.js</code>. 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 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 den TestingBot-Schlüssel und das Secret an den angegebenen Stellen einfüllen. Sie finden diese 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="fortschrittlich_automatisierte_tests_3">Fortschrittlich: Automatisierte Tests</h4> <p>Wir werden das tatsächliche 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 ganze Menge, aber ich bin sicher, dass Sie die Vorteile der Nutzung von Automatisierungstools erkennen können, um bei Tests einige der schweren Aufgaben zu übernehmen.</p> <p>Im nächsten Artikel werden wir uns ansehen, wie wir unser eigenes lokales Automatisierungssystem mit Selenium einrichten und wie wir dies mit Diensten wie Sauce Labs, BrowserStack und TestingBot kombinieren können.</p> <ul class="prev-next"><li><a class="button secondary" href="/de/docs/Learn_web_development/Extensions/Testing/Feature_detection"><span class="button-wrap"> Zurück </span></a></li><li><a class="button secondary" href="/de/docs/Learn_web_development/Extensions/Testing"><span class="button-wrap"> Übersicht: Testen</span></a></li><li><a class="button secondary" href="/de/docs/Learn_web_development/Extensions/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_web_development/extensions/testing/automated_testing/index.md?plain=1" title="Folder: de/learn_web_development/extensions/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_web_development%2FExtensions%2FTesting%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_web_development%2Fextensions%2Ftesting%2Fautomated_testing%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fde%2Fdocs%2FLearn_web_development%2FExtensions%2FTesting%2FAutomated_testing%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content-de%2Fblob%2Fmain%2Ffiles%2Fde%2Flearn_web_development%2Fextensions%2Ftesting%2Fautomated_testing%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content-de%2Fcommit%2F452fe502cfb4c9a91c346af17370ecfb6a8bd17e%0A*+Document+last+modified%3A+2025-02-17T00%3A20%3A27.000Z%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://mastodon.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 xmlns="http://www.w3.org/2000/svg" width="137" height="32" fill="none" viewBox="0 0 267.431 62.607"><path fill="currentColor" d="m13.913 23.056 5.33 25.356h2.195l5.33-25.356h14.267v38.976h-7.578V29.694h-2.194l-7.264 32.337h-7.343L9.418 29.694H7.223v32.337H-.354V23.056Zm47.137 9.123c9.12 0 14.423 5.385 14.423 15.214s-5.33 15.214-14.423 15.214c-9.12 0-14.423-5.385-14.423-15.214 0-9.855 5.304-15.214 14.423-15.214m0 24.363c4.285 0 6.428-2.196 6.428-7.032v-4.287c0-4.836-2.143-7.032-6.428-7.032s-6.428 2.196-6.428 7.032v4.287c0 4.836 2.143 7.032 6.428 7.032m18.473-.157 15.47-18.01h-15.26v-5.647h24.352v5.646L88.616 56.385h15.704v5.646H79.523Zm29.318-23.657h11.183V62.03h-7.578V38.375h-3.632v-5.646zm3.605-9.672h7.578v5.646h-7.578zm13.17 0h11.21v38.976h-7.578v-33.33h-3.632zm16.801 0H153.6v38.976h-7.577v-33.33h-3.632v-5.646zm29.03 9.123c4.442 0 7.394 2.143 8.231 5.881h2.194v-5.332h9.276v5.646h-3.632v18.011h3.632v5.646h-4.442c-3.135 0-4.834-1.699-4.834-4.836V56.7h-2.194c-.81 3.738-3.789 5.881-8.23 5.881-6.978 0-11.916-5.829-11.916-15.214 0-9.384 4.938-15.187 11.915-15.187m2.3 24.363c4.284 0 6.192-2.196 6.192-7.032v-4.287c0-4.836-1.908-7.032-6.193-7.032-4.18 0-6.193 2.196-6.193 7.032v4.287c0 4.836 2.012 7.032 6.193 7.032m48.34 5.489h-7.577V0h7.577zm6.585-29.643h32.165v-2.196l-21.295-7.634v-6.143l21.295-7.633V6.588h-25.345V0h32.165v12.522l-17.35 5.881V20.6l17.35 5.882v12.521h-38.985zm0-25.801h6.794v6.796h-6.794z"></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–<!-- -->2025<!-- --> 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_web_development/Extensions/Testing/Automated_testing","doc":{"body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Extensions/Testing/Feature_detection\"><span class=\"button-wrap\"> Zurück </span></a></li><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Extensions/Testing\"><span class=\"button-wrap\"> Übersicht: Testen</span></a></li><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment\"><span class=\"button-wrap\"> Weiter </span></a></li></ul>\n<p>Mehrmals täglich Tests manuell auf verschiedenen Browsern und Geräten durchzuführen, kann mühsam und zeitraubend sein. Um dies effizient zu handhaben, sollten Sie sich mit Automatisierungstools vertraut machen. In diesem Artikel betrachten wir, was verfügbar ist, wie man Task-Runner verwendet, und wie man die Grundlagen kommerzieller Browser-Test-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 Kernsprachen <a href=\"/de/docs/Learn_web_development/Core/Structuring_content\">HTML</a>, <a href=\"/de/docs/Learn_web_development/Core/Styling_basics\">CSS</a> und <a href=\"/de/docs/Learn_web_development/Core/Scripting\">JavaScript</a>; eine Vorstellung von den grundlegenden <a href=\"/de/docs/Learn_web_development/Extensions/Testing/Introduction\">Prinzipien des plattformübergreifenden Testens</a>.\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Ziel:</th>\n <td>\n Ein Verständnis dafür zu vermitteln, was automatisiertes Testen umfasst, wie es Ihr Leben erleichtern kann und wie Sie einige der kommerziellen Produkte nutzen können, die das Ganze erleichtern.\n </td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"automatisierung_erleichtert_die_arbeit","title":"Automatisierung erleichtert die Arbeit","isH3":false,"content":"<p>In diesem Modul haben wir viele verschiedene Möglichkeiten detailliert beschrieben, wie Sie Ihre Websites und Apps testen können, und den Umfang erläutert, den Ihr plattformübergreifendes Testen in Bezug auf zu testende Browser, Barrierefreiheitsbetrachtungen und mehr haben sollte. Klingt nach viel Arbeit, nicht wahr?</p>\n<p>Wir stimmen zu — alle Punkte, die wir in früheren Artikeln betrachtet haben, manuell zu testen, kann wirklich belastend sein. Glücklicherweise gibt es Tools, die uns helfen, einen Teil dieser Belastung zu automatisieren. Es gibt zwei Hauptwege, wie wir die in diesem Modul besprochenen Tests 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> oder <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-Skripte</a>, um Tests durchzuführen und Code während Ihres Build-Prozesses zu bereinigen. Dies ist eine großartige Möglichkeit, um Aufgaben wie Linting und Code-Minifizierung zu automatisieren, CSS-Präfixe hinzuzufügen oder aufkommende JavaScript-Funktionen für maximale plattformübergreifende 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 auf installierten Browsern durchzuführen und Ergebnisse zurückzugeben, die Sie auf Fehler in den Browsern aufmerksam machen, sobald sie auftreten. Kommerzielle plattformübergreifende Test-Apps 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, ermöglichen Ihnen jedoch den Remote-Zugriff auf deren Einrichtung über eine Oberfläche, wodurch Sie sich die Einrichtung Ihres eigenen Testsystems ersparen.</li>\n</ol>\n<p>Wir werden im nächsten Artikel darauf eingehen, wie Sie Ihr eigenes auf Selenium basierendes Testsystem einrichten können. In diesem Artikel schauen wir uns an, wie man einen Task-Runner einrichtet und die grundlegende Funktionalität kommerzieller Systeme wie die oben genannten nutzt.</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nDie beiden oben genannten Kategorien schließen sich nicht gegenseitig aus. Es ist möglich, einen Task-Runner einzurichten, um über eine API auf einen Dienst wie Sauce Labs oder LambdaTest zuzugreifen, plattformübergreifende Tests durchzuführen und Ergebnisse zurückzugeben. Dies werden wir unten ebenfalls betrachten.</p>\n</div>"}},{"type":"prose","value":{"id":"verwendung_eines_task-runners_zur_automatisierung_von_test-tools","title":"Verwendung eines Task-Runners zur Automatisierung von Test-Tools","isH3":false,"content":"<p>Wie bereits erwähnt, können Sie durch die Verwendung eines Task-Runners zur automatisierten Durchführung aller benötigten Aufgaben in einem bestimmten Punkt Ihres Build-Prozesses die Ausführung häufiger Aufgaben wie Linting und Minifizierung von Code erheblich beschleunigen. Beispielsweise könnte dies jedes Mal geschehen, wenn Sie eine Datei speichern oder an einem anderen Punkt. In diesem Abschnitt sehen wir uns an, wie man die Ausführung von Aufgaben mit Node und Gulp automatisiert, einer anfängerfreundlichen Option.</p>"}},{"type":"prose","value":{"id":"einrichtung_von_node_und_npm","title":"Einrichtung von Node und npm","isH3":true,"content":"<p>Die meisten Tools basieren heutzutage auf <a href=\"/de/docs/Glossary/Node.js\">Node.js</a>, sodass Sie es zusammen mit seinem zugehörigen Paketmanager, <a href=\"https://www.npmjs.com/\" class=\"external\" target=\"_blank\"><code>npm</code></a>, installieren müssen:</p>\n<ol>\n<li>Der einfachste Weg, Node.js und <code>npm</code> zu installieren und zu aktualisieren, ist über einen Node-Version-Manager: Folgen Sie den Anweisungen unter <a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment#installing_node\">Node installieren</a>.</li>\n<li>Stellen Sie sicher, dass Sie <a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment#testing_your_nodejs_and_npm_installation\">testen, ob Ihre Installation erfolgreich war</a>, bevor Sie fortfahren.</li>\n<li>Wenn Sie Node.js/<code>npm</code> bereits installiert haben, sollten Sie diese auf die neuesten Versionen aktualisieren. Dies kann durch die Installation der neuesten LTS-Versionen mithilfe des Node-Version-Managers erfolgen (siehe nochmals 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. Das ist einfach zu bewerkstelligen.</p>\n<p>Beispielsweise erstellen wir zunächst ein Testverzeichnis, in dem wir spielen können, ohne irgendetwas kaputt zu machen.</p>\n<ol>\n<li>\n<p>Erstellen Sie ein neues Verzeichnis an einem sinnvollen Ort mit der Benutzeroberfläche Ihres Dateimanagers oder navigieren Sie auf der Befehlszeile zu dem gewünschten Speicherort und führen Sie den folgenden Befehl aus:</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 wechseln und es mit folgendem Befehl initialisieren:</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 für den Moment einfach die Standardwerte auswählen.</p>\n</li>\n<li>\n<p>Nachdem alle Fragen gestellt wurden, wird gefragt, ob die eingegebenen Informationen in Ordnung sind. Geben Sie <code>yes</code> ein und drücken Sie Enter/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 für den Moment sieht sie ungefähr so aus:</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 können Sie weitermachen.</p>"}},{"type":"prose","value":{"id":"einrichtung_der_gulp-automatisierung","title":"Einrichtung der Gulp-Automatisierung","isH3":true,"content":"<p>Schauen wir uns die Einrichtung von Gulp an und wie man es nutzt, um einige Test-Tools zu automatisieren.</p>\n<ol>\n<li>\n<p>Zunächst erstellen Sie ein npm-Testprojekt gemäß der am Ende des vorherigen Abschnitts beschriebenen Vorgehensweise.\nAktualisieren Sie auch die <code>package.json</code>-Datei mit der Zeile: <code>\"type\": \"module\"</code>, sodass sie ungefähr so aussieht:</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>Als nächstes benötigen Sie einige Beispiel-Inhalte in HTML, CSS und JavaScript, um Ihr System zu testen — erstellen Sie Kopien unserer Beispiel-<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>-Dateien in einem Unterordner mit dem Namen <code>src</code> in Ihrem Projektordner.\nSie können auch Ihre eigenen Testinhalte ausprobieren, beachten Sie jedoch, dass solche Tools nicht mit internen JS/CSS arbeiten — Sie benötigen externe Dateien.</p>\n</li>\n<li>\n<p>Installieren Sie zuerst gulp global (d. h., es wird in allen Projekten verfügbar sein) 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 --global gulp-cli\n</code></pre></div>\n</li>\n<li>\n<p>Führen Sie anschließend 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>. Diese Datei wird alle unsere Aufgaben ausführen. Geben 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>Dies erfordert das zuvor installierte <code>gulp</code>-Modul und exportiert dann eine Standardaufgabe, die nichts weiter tut, als eine Nachricht im Terminal auszugeben — dies ist nützlich, um uns zu informieren, dass Gulp funktioniert. Jede Gulp-Aufgabe wird im gleichen Grundformat exportiert — <code>exports.taskName = taskFunction</code>. Jede Funktion nimmt einen Parameter — einen Callback, der ausgeführt wird, wenn die Aufgabe abgeschlossen ist.</p>\n</li>\n<li>\n<p>Sie können die Standardaufgabe 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":"hinzufügen_einiger_realer_aufgaben_zu_gulp","title":"Hinzufügen einiger realer Aufgaben zu Gulp","isH3":true,"content":"<p>Um einige reale Aufgaben zu Gulp hinzuzufügen, müssen wir überlegen, was wir tun wollen. Ein vernünftiges Set an Basisfunktionen für unser Projekt könnte sein:</p>\n<ul>\n<li>html-tidy, css-lint und js-hint, um häufige HTML/CSS/JS-Fehler zu überprüfen und zu beheben (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 nur dort Anbieterpräfixe hinzuzufügen, wo es benötigt wird (siehe <a href=\"https://www.npmjs.com/package/gulp-autoprefixer\" class=\"external\" target=\"_blank\">gulp-autoprefixer</a>).</li>\n<li>babel, um neue JavaScript-Syntaxmerkmale in traditionelle Syntax umzuwandeln, 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 zunächst über npm installieren, dann alle Abhängigkeiten am Anfang der <code>gulpfile.js</code>-Datei einfügen, dann Ihren Test/die Tests am Ende einfügen und schließlich den Namen Ihrer Aufgabe exportieren, um über den Befehl von Gulp verfügbar zu sein.</p>\n<h4 id=\"html-tidy\">html-tidy</h4>\n<ol>\n<li>\n<p>Installieren Sie es 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 --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 die <code>package.json</code>-Datei Ihres Projekts schauen, werden Sie einen Eintrag dafür in der Eigenschaft <code>devDependencies</code> 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 an das 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 erfassen wir unsere Entwicklungs-<code>index.html</code>-Datei mit <code>gulp.src()</code>, das es uns ermöglicht, eine Quelldatei zu erfassen, um etwas damit zu machen.</p>\n<p>Wir verwenden dann die Funktion <code>pipe()</code>, um diese Quelle an einen anderen Befehl weiterzugeben, um etwas anderes damit zu tun. Wir können so viele davon hintereinander schalten, wie wir wollen. Zuerst führen wir <code>htmltidy()</code> auf der Quelle aus, das durchgeht und Fehler in unserer Datei behebt. Die zweite <code>pipe()</code>-Funktion schreibt die Ausgabedatei HTML in das <code>build</code>-Verzeichnis.</p>\n<p>In der Eingangs-Version der Datei haben Sie vielleicht bemerkt, dass wir ein leeres <a href=\"/de/docs/Web/HTML/Element/p\"><code><p></code></a>-Element eingefügt haben; htmltidy hat dies bis zur Erstellung der Ausgabedatei entfernt.</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 Befehlen:</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 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 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 an das 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 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 greifen wir auf unsere <code>style.css</code>-Datei zu, führen csslint darauf aus (was eine Liste von Fehlern in Ihrem CSS im Terminal ausgibt), und führen es dann durch autoprefixer, um Präfixe hinzuzufügen, die erforderlich sind, um aufkeimende CSS-Funktionen in älteren Browsern lauffähig zu machen. Am Ende der Pipe-Kette geben wir unser modifiziertes CSS mit Präfixen in das <code>build</code>-Verzeichnis aus. Beachten Sie, dass dies nur funktioniert, wenn csslint keine Fehler findet — versuchen Sie, eine geschweifte Klammer aus Ihrer CSS-Datei zu entfernen und Gulp 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 Befehlen:</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 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 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 an das 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 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 greifen wir auf unsere <code>main.js</code>-Datei zu, führen <code>jshint</code> darauf aus und geben die Ergebnisse mit <code>jshint.reporter</code> im Terminal aus; wir übergeben die Datei dann an babel, das sie in eine alte Syntax konvertiert 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\">Pfeilfunktion</a>, die babel in eine alte Funktionssyntax umgewandelt hat.</p>\n<h4 id=\"weitere_ideen\">Weitere Ideen</h4>\n<p>Sobald dies alles eingerichtet ist, können Sie den <code>gulp</code>-Befehl in Ihrem Projektverzeichnis ausführen, und Sie sollten eine Ausgabe wie diese erhalten:</p>\n<p><img src=\"/de/docs/Learn_web_development/Extensions/Testing/Automated_testing/gulp-output.png\" alt=\"Ausgabe in einem Code-Editor, wo Zeilen die Zeit der Start- oder Endaufgaben, den Aufgabennamen und die Dauer von 'Fertig' Aufgaben anzeigen.\" width=\"697\" height=\"478\" loading=\"lazy\"></p>\n<p>Sie können dann die von Ihren automatisierten Aufgaben erzeugten Dateien testen, indem Sie sie im <code>build</code>-Verzeichnis anschauen und <code>build/index.html</code> in Ihrem Webbrowser laden.</p>\n<p>Wenn Sie Fehler erhalten, überprüfen Sie, ob Sie alle Abhängigkeiten und die Tests wie oben gezeigt hinzugefügt haben; versuchen Sie auch, die Abschnitte des HTML/CSS/JavaScript-Codes auszukommentieren und dann Gulp 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, die Sie verwenden können, um Ihre Dateien zu überwachen und Tests auszuführen, wann immer Sie eine Datei speichern. Versuchen Sie beispielsweise, das folgende Kommando 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 jetzt, den Befehl <code>gulp watch</code> in Ihr Terminal einzugeben. Gulp überwacht nun Ihr Verzeichnis und führt die entsprechenden Aufgaben aus, wann immer Sie eine Änderung an einer HTML-, CSS- oder JavaScript-Datei speichern.</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nDas <code>*</code>-Zeichen ist ein Platzhalterzeichen — hier sagen wir \"führe diese Aufgaben aus, wenn eine Datei diesen Typs gespeichert wird\". Sie könnten Platzhalter auch in Ihren Hauptaufgaben verwenden, z. B. <code>gulp.src('src/*.css')</code> würde alle Ihre CSS-Dateien erfassen und dann gepipte Aufgaben darauf ausführen.</p>\n</div>\n<p>Mit Gulp können Sie noch viel mehr machen. 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. Wir wollen sicherlich nicht sagen, dass Gulp die beste Lösung ist, aber es funktioniert für uns und ist für Anfänger ziemlich zugänglich. Sie könnten auch andere Lösungen ausprobieren:</p>\n<ul>\n<li>Grunt funktioniert auf eine sehr ähnliche Weise wie Gulp, außer dass es sich auf in einer Konfigurationsdatei spezifizierte Aufgaben stützt anstatt auf geschriebenen JavaScript. Siehe <a href=\"https://gruntjs.com/getting-started\" class=\"external\" target=\"_blank\">Erste Schritte mit Grunt für weitere Details.</a></li>\n<li>Sie können Aufgaben direkt mit npm-Skripten, die sich in Ihrer <code>package.json</code>-Datei befinden, ausführen, ohne ein zusätzliches Task-Runner-System installieren zu müssen. Dieses Prinzip arbeitet auf der Prämisse, dass Gulp-Plugins im Wesentlichen Wrapper um Befehlszeilentools sind. Wenn Sie also herausfinden, wie Sie die Tools über die Befehlszeile ausführen, können Sie sie dann mit npm-Skripten ausführen. Es ist etwas schwieriger zu arbeiten, kann aber lohnend für diejenigen sein, die gute Kenntnisse in der Befehlszeile haben. <a href=\"https://css-tricks.com/why-npm-scripts/\" class=\"external\" target=\"_blank\">Warum npm-Skripte?</a> bietet eine gute Einführung mit einer Menge weiterer Informationen.</li>\n</ul>"}},{"type":"prose","value":{"id":"verwendung_kommerzieller_testdienste_zur_beschleunigung_von_browser-tests","title":"Verwendung kommerzieller Testdienste zur Beschleunigung von Browser-Tests","isH3":false,"content":"<p>Schauen wir nun auf kommerzielle Browser-Testdienste von Drittanbietern und was sie für uns tun können.</p>\n<p>Wenn Sie diese Arten von Diensten verwenden, geben Sie eine URL der Seite an, die Sie testen möchten, zusammen mit Informationen darüber, in welchen Browsern Sie sie testen möchten. Die App konfiguriert dann ein neues VM mit dem von Ihnen angegebenen Betriebssystem und Browser und gibt die Testergebnisse in Form von Screenshots, Videos, Protokolldateien, Text usw. zurück. Dies ist sehr nützlich und viel bequemer als alle OS/Browtersucher-Kombinationen selbst einrichten zu müssen.</p>\n<p>Sie können dann eine Stufe höher gehen, indem Sie über eine API programmgesteuerten Zugriff auf die Funktionalität erhalten, was bedeutet, dass solche Apps mit Task-Runner, wie Ihren eigenen lokalen Selenium-Umgebungen und anderen Tools kombiniert werden können, um automatisierte Tests zu erstellen.</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nEs gibt andere kommerzielle Browser-Testsysteme, aber in diesem Artikel konzentrieren wir uns auf BrowserStack, Sauce Labs und TestingBot. Wir sagen nicht, dass dies unbedingt die besten verfügbaren Tools sind, aber sie sind gute Tools, die für Anfänger einfach einzurichten sind.</p>\n</div>"}},{"type":"prose","value":{"id":"browserstack","title":"BrowserStack","isH3":true,"content":"<h4 id=\"erste_schritte_mit_browserstack\">Erste Schritte mit BrowserStack</h4>\n<p>Um zu beginnen:</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 im oberen Navigationsmenü auf den Link <em>Live</em>, um zu Live Manual Testing zu wechseln.</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, welches Gerät und welchen 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 verfügbaren Browser auf diesem Gerät anzuzeigen.</p>\n<p><img src=\"/de/docs/Learn_web_development/Extensions/Testing/Automated_testing/browserstack-test-choices-sized.png\" alt=\"Testauswahl\" width=\"1000\" height=\"482\" loading=\"lazy\"></p>\n<p>Ein Klick auf eines dieser Browser-Symbole lädt Ihr gewünschtes Plattform-, Geräte- und Browserprogramm — wählen Sie eines aus und probieren Sie es aus.</p>\n<p><img src=\"/de/docs/Learn_web_development/Extensions/Testing/Automated_testing/browserstack-test-device-sized.png\" alt=\"Testgeräte\" width=\"300\" height=\"629\" loading=\"lazy\"></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 verwenden (z. B. Pinch/Zoom, zwei Finger zum Scrollen) auf den Touchpads von unterstützenden Geräten wie MacBooks. Nicht alle Funktionen sind auf allen Geräten verfügbar.</p>\n<p>Sie sehen auch ein Menü, mit dem Sie die Sitzung steuern können.</p>\n<p><img src=\"/de/docs/Learn_web_development/Extensions/Testing/Automated_testing/browserstack-test-menu-sized.png\" alt=\"Testmenü\" width=\"180\" height=\"519\" loading=\"lazy\"></p>\n<p>Die verfügbaren Funktionen variieren je nachdem, welcher Browser geladen ist, und können Steuerungen für Folgendes umfassen:</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 Zoomlevels und Umschalten der Orientierung</li>\n<li>Speichern und Laden von Bookmarks</li>\n<li>Erfassen/Kommentieren von Screenshots und Einreichen von Fehlerberichten</li>\n<li>Zugriff auf Browser DevTools</li>\n<li>Ändern des gemeldeten Standorts</li>\n<li>Drosselung des Netzwerks</li>\n<li>Zugriff auf Bildschirmlesegeräte</li>\n</ul>\n<h4 id=\"fortschrittlich_die_browserstack_api\">Fortschrittlich: Die BrowserStack API</h4>\n<p>BrowserStack hat eine <a href=\"https://www.browserstack.com/docs/automate/api-reference/selenium/introduction\" class=\"external\" target=\"_blank\">restful API</a>, die es ermöglicht, programmgesteuert Details Ihres Kontos, Ihrer Sitzungen, Builds usw. abzurufen.</p>\n<p>Schauen wir uns kurz an, wie wir über Node.js auf die API zugreifen könnten.</p>\n<ol>\n<li>\n<p>Richten Sie zuerst ein neues npm-Projekt ein, um dies zu testen, wie unter <a href=\"#einrichtung_von_node_und_npm\">Einstellung von Node und npm</a> beschrieben. Verwenden Sie einen anderen Verzeichnisnamen als zuvor, z. B. <code>bstack-test</code>.</p>\n</li>\n<li>\n<p>Erstellen Sie eine neue Datei im Stamm Ihres Projekts mit dem Namen <code>call_bstack.js</code> und geben Sie 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 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 den BrowserStack-Benutzernamen und den Zugriffsschlüssel durch Ihre tatsächlichen Werte. Diese können aus Ihren <a href=\"https://www.browserstack.com/accounts/profile/details\" class=\"external\" target=\"_blank\">BrowserStack Account & Profile Details</a> unter dem Abschnitt <em>Authentication & Security</em> abgerufen werden.</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 das Senden von HTTP-Anfragen zu behandeln, indem Sie den folgenden Befehl in Ihrem Terminal ausführen (wir haben uns für axios entschieden, 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 im Terminal ein Objekt 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>Im Folgenden haben wir weitere fertige Funktionen bereitgestellt, die Sie möglicherweise nützlich finden, wenn Sie mit der Ruhe-API von BrowserStack arbeiten.</p>\n<p>Diese Funktion gibt Zusammenfassungsdetails aller zuvor erstellten automatisierten Builds zurück (finden Sie mehr Details zu automatisierten Tests von BrowserStack im nächsten Artikel unter <a href=\"/de/docs/Learn_web_development/Extensions/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 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=\"fortschrittlich_automatisierte_tests\">Fortschrittlich: Automatisierte Tests</h4>\n<p>Wir werden das <a href=\"/de/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment#browserstack\">Ausführen automatisierter BrowserStack-Tests</a> im nächsten Artikel behandeln.</p>"}},{"type":"prose","value":{"id":"sauce_labs","title":"Sauce Labs","isH3":true,"content":"<h4 id=\"erste_schritte_mit_sauce_labs\">Erste Schritte mit 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 Optionen. Stellen Sie vorerst sicher, dass Sie in der Registerkarte <em>Manual 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 einer Seite ein, die Sie testen möchten (verwenden Sie beispielsweise <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>), und wählen Sie dann eine Browser-/Betriebssystemkombination aus, die Sie testen möchten, indem Sie die verschiedenen Schaltflächen und Listen verwenden. Es gibt viel Auswahl, wie Sie sehen werden!!<img src=\"/de/docs/Learn_web_development/Extensions/Testing/Automated_testing/sauce-manual-session.png\" alt=\"select sauce manual session\" width=\"600\" height=\"636\" loading=\"lazy\"></p>\n</li>\n<li>\n<p>Wenn Sie auf Start session klicken, erscheint ein Ladescreen, der eine virtuelle Maschine mit der von Ihnen gewählten Kombination aufbaut.</p>\n</li>\n<li>\n<p>Wenn das Laden abgeschlossen ist, können Sie die Webseite, die im ausgewählten Browser ausgeführt wird, fernsteuern und testen.<img src=\"/de/docs/Learn_web_development/Extensions/Testing/Automated_testing/sauce-test-running.png\" alt=\"Sauce test running\" width=\"800\" height=\"390\" loading=\"lazy\"></p>\n</li>\n<li>\n<p>Von hier aus können Sie das Layout sehen, wie es im Browser, den Sie testen, aussehen würde, sich mit der Maus bewegen und versuchen, auf Schaltflächen zu klicken usw. Das obere Menü ermöglicht es 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 zu kopieren.</li>\n<li>Einen Screenshot zu machen.</li>\n<li>Im Vollbildmodus zu testen.</li>\n</ul>\n</li>\n</ol>\n<p>Sobald Sie die Sitzung beenden, kehren Sie zur Registerkarte Manual Tests zurück, wo Sie einen Eintrag für jede der vorher gestarteten manuellen Sitzungen sehen. Durch Klicken auf einen dieser Einträge werden weitere Daten für die Sitzung angezeigt. Hier können Sie Screenshots, die Sie gemacht haben, herunterladen, ein Video der Sitzung ansehen, Datenprotokolle einsehen und mehr.</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nDies ist bereits sehr nützlich und viel bequemer, als all diese Emulatoren und virtuellen Maschinen selbst einrichten zu müssen.</p>\n</div>\n<h4 id=\"fortschrittlich_die_sauce_labs_api\">Fortschrittlich: 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 Sie in die Lage versetzt, Details Ihres Kontos und bestehender Tests programmgesteuert abzurufen und Tests mit weiteren Details zu versehen, wie z. B. ihrem Erfolgs-/Fehlerzustand, der durch manuelles Testen allein nicht aufgezeichnet werden kann. Beispielsweise könnten Sie einen Ihrer eigenen Selenium-Tests mit Sauce Labs remote ausführen, um eine bestimmte Browser-/Betriebssystemkombination zu testen, und dann die Testergebnisse an Sauce Labs zurückgeben.</p>\n<p>Es hat mehrere Clients zur Verfügung, die es Ihnen ermöglichen, Aufrufe der API unter Verwendung Ihrer bevorzugten Umgebung, sei es PHP, Java, Node.js usw., zu tätigen.</p>\n<p>Schauen wir uns kurz an, wie wir über Node.js und <a href=\"https://github.com/saucelabs/node-saucelabs\" class=\"external\" target=\"_blank\">node-saucelabs</a> auf die API zugreifen würden.</p>\n<ol>\n<li>\n<p>Richten Sie zuerst ein neues npm-Projekt ein, um dies zu testen, wie unter <a href=\"#einrichtung_von_node_und_npm\">Einstellung von Node und npm</a> beschrieben. Verwenden Sie einen anderen Verzeichnisnamen als zuvor, z. B. <code>sauce-test</code>.</p>\n</li>\n<li>\n<p>Installieren Sie den Node Sauce Labs 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 saucelabs\n</code></pre></div>\n</li>\n<li>\n<p>Erstellen Sie eine neue Datei im Stamm Ihres Projekts mit dem Namen <code>call_sauce.js</code>. 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 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 den API-Schlüssel an den angegebenen Stellen eingeben. 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 dies jetzt aus.</p>\n</li>\n<li>\n<p>Stellen Sie sicher, dass alles gespeichert ist, und führen Sie Ihre Datei wie folgt 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=\"fortschrittlich_automatisierte_tests_2\">Fortschrittlich: Automatisierte Tests</h4>\n<p>Wir werden das tatsächliche Ausführen automatisierter Sauce Labs-Tests im nächsten Artikel behandeln.</p>"}},{"type":"prose","value":{"id":"testingbot","title":"TestingBot","isH3":true,"content":"<h4 id=\"erste_schritte_mit_testingbot\">Erste Schritte mit 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 geschehen, nachdem Sie Ihre E-Mail-Adresse bestätigt haben.</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, die Sie auswählen können. Stellen Sie vorerst sicher, dass Sie auf der Registerkarte <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>Wählen Sie die Browser-/OS-Kombination, die Sie testen möchten, indem Sie die Kombination im Raster auswählen.\n<img src=\"/de/docs/Learn_web_development/Extensions/Testing/Automated_testing/screen_shot_2019-04-19_at_14.55.33.png\" alt=\"Testauswahl\" width=\"1159\" height=\"586\" loading=\"lazy\"></p>\n</li>\n<li>\n<p>Wenn Sie auf <em>Start Browser</em> klicken, erscheint ein Ladescreen, der eine virtuelle Maschine mit der von Ihnen gewählten Kombination aufbaut.</p>\n</li>\n<li>\n<p>Wenn das Laden abgeschlossen ist, können Sie die Webseite, die im gewählten Browser läuft, remote testen.</p>\n</li>\n<li>\n<p>Von hier aus können Sie das Layout sehen, wie es im Browser, den Sie testen, aussehen würde, sich mit der Maus bewegen und versuchen, auf Schaltflächen zu klicken usw. Das seitliche Menü ermöglicht es 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 zu testen.</li>\n</ul>\n</li>\n</ol>\n<p>Sobald Sie die Sitzung beenden, kehren Sie zur Seite <em>Live Web Testing</em> zurück, wo Sie einen Eintrag für jede der vorher gestarteten manuellen Sitzungen sehen. Durch Klicken auf einen dieser Einträge werden weitere Daten für die Sitzung angezeigt. Hier können Sie alle gemachten Screenshots herunterladen, ein Video des Tests ansehen und Protokolle für die Sitzung einsehen.</p>\n<h4 id=\"fortschrittlich_die_testingbot_api\">Fortschrittlich: Die TestingBot API</h4>\n<p>TestingBot verfügt über eine <a href=\"https://testingbot.com/support/api\" class=\"external\" target=\"_blank\">restful API</a>, die es ermöglicht, programmgesteuert Details Ihres Kontos und bestehender Tests abzurufen und Tests mit weiteren Details zu versehen, wie z. B. ihrem Erfolgs-/Fehlerzustand, der durch manuelles Testen allein nicht aufgezeichnet werden kann.</p>\n<p>TestingBot hat mehrere API-Clients, die Sie zur Interaktion mit der API verwenden können, darunter Clients für NodeJS, Python, Ruby, Java und PHP.</p>\n<p>Unten finden Sie ein Beispiel, wie Sie mit dem TestingBot API JavaScript-Client <a href=\"https://www.npmjs.com/package/testingbot-api\" class=\"external\" target=\"_blank\">testingbot-api</a> mit dem API interagieren können.</p>\n<ol>\n<li>\n<p>Richten Sie zuerst ein neues npm-Projekt ein, um dies zu testen, wie unter <a href=\"#einrichtung_von_node_und_npm\">Einstellung von Node und npm</a> beschrieben. Verwenden Sie einen anderen Verzeichnisnamen als zuvor, z. B. <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 Stamm Ihres Projekts mit dem Namen <code>tb.js</code>. 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 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 den TestingBot-Schlüssel und das Secret an den angegebenen Stellen einfüllen. Sie finden diese 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=\"fortschrittlich_automatisierte_tests_3\">Fortschrittlich: Automatisierte Tests</h4>\n<p>Wir werden das tatsächliche 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 ganze Menge, aber ich bin sicher, dass Sie die Vorteile der Nutzung von Automatisierungstools erkennen können, um bei Tests einige der schweren Aufgaben zu übernehmen.</p>\n<p>Im nächsten Artikel werden wir uns ansehen, wie wir unser eigenes lokales Automatisierungssystem mit Selenium einrichten und wie wir dies mit Diensten wie Sauce Labs, BrowserStack und TestingBot kombinieren können.</p>\n<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Extensions/Testing/Feature_detection\"><span class=\"button-wrap\"> Zurück </span></a></li><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Extensions/Testing\"><span class=\"button-wrap\"> Übersicht: Testen</span></a></li><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment\"><span class=\"button-wrap\"> Weiter </span></a></li></ul>"}}],"isActive":true,"isMarkdown":true,"isTranslated":true,"locale":"de","mdn_url":"/de/docs/Learn_web_development/Extensions/Testing/Automated_testing","modified":"2025-02-17T00:20:27.000Z","native":"Deutsch","noIndexing":false,"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":"正體中文 (繁體)"}],"pageTitle":"Einführung in automatisiertes Testen - Lernen Sie Webentwicklung | MDN","parents":[{"uri":"/de/docs/Learn_web_development","title":"Lernen Sie Webentwicklung"},{"uri":"/de/docs/Learn_web_development/Extensions","title":"Erweiterungsmodule"},{"uri":"/de/docs/Learn_web_development/Extensions/Testing","title":"Testen"},{"uri":"/de/docs/Learn_web_development/Extensions/Testing/Automated_testing","title":"Einführung in automatisiertes Testen"}],"popularity":null,"short_title":"Einführung in automatisiertes Testen","sidebarHTML":"<ol><li class=\"section\"><a href=\"/de/docs/Learn_web_development/Getting_started\">Einstiegsmodule</a></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup\">Umgebung einrichten</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software\">Installation grundlegender Software</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web\">Surfen im Web</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors\">Code-Editor</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files\">Umgang mit Dateien</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Command_line\">Leitfaden für die Befehlszeilen-Einführung</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website\">Ihre erste Website</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like\">Wie wird Ihre Website aussehen?</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content\">HTML: Erstellen der Inhalte</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content\">CSS: Gestaltung des Inhalts</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity\">JavaScript: Interaktivität hinzufügen</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website\">Veröffentlichen Ihrer Website</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Getting_started/Web_standards\">Webstandards</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works\">How the web works</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model\">Das Modell der Webstandards</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites\">Wie Browser Websites laden</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills\">Soziale Kompetenzen</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning\">Forschung und Lernen</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork\">Zusammenarbeit und Teamarbeit</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes\">Workflows und Prozesse</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews\">Erfolgreich in Vorstellungsgesprächen</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn_web_development/Core\">Kernmodule</a></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Structuring_content\">Inhalte mit HTML strukturieren</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax\">Grundlegende HTML-Syntax</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata\">Was befindet sich im Kopf? Metadaten einer Webseite</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs\">Überschriften und Absätze in HTML</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance\">Hervorhebung und Wichtigkeit</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Lists\">Listen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Structuring_documents\">Strukturierung von Dokumenten</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features\">Erweiterte Textfunktionen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Creating_links\">Erstellen von Links</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter\">Herausforderung: Eine E-Mail korrekt auszeichnen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content\">Herausforderung: Strukturierung einer Inhaltsseite</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/HTML_images\">HTML-Bilder</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio\">HTML video und audio</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page\">Herausforderung: Mozilla Splash-Seite</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics\">Grundlagen von HTML-Tabellen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Table_accessibility\">Barrierefreiheit von HTML-Tabellen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Planet_data_table\">Herausforderung: Strukturierung einer Planeten-Datentabelle</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/HTML_forms\">Formulare und Schaltflächen in HTML</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML\">Debugging von HTML</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Styling_basics\">Grundlagen des CSS-Stylings</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/What_is_CSS\">Was ist CSS?</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Getting_started\">Einstieg in CSS</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page\">Herausforderung: Gestaltung einer Biografie-Seite</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Basic_selectors\">Grundlagen der CSS-Selektoren</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors\">Attribut-Selektoren</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements\">Pseudoklassen und Pseudoelemente</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Combinators\">Kombinatoren</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Box_model\">Das Box-Modell</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts\">Umgang mit Konflikten</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Values_and_units\">CSS-Werte und -Einheiten</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Sizing\">Größenbestimmung von Elementen in CSS</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders\">Hintergründe und Rahmen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Overflow\">Überlaufender Inhalt</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Images_media_forms\">Bilder, Medien und Formularelemente</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Tables\">Tabellen stylen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS\">Debugging CSS</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension\">Herausforderung: Grundlegendes CSS-Verständnis</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper\">Herausforderung: Erstellung eines ansprechenden Briefpapiers</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box\">Herausforderung: Eine cool aussehende Box</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Text_styling\">CSS-Textgestaltung</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Fundamentals\">Grundlegendes zur Text- und Schriftgestaltung</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Styling_lists\">Listen gestalten</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Styling_links\">Gestaltung von Links</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Web_fonts\">Webfonts</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage\">Herausforderung: Setzen einer Startseite für eine Gemeinschaftsschule</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/CSS_layout\">CSS-Layout</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Introduction\">Einführung in CSS-Layout</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Floats\">Floats</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Positioning\">Platzierung</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Flexbox\">Flexbox</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Grids\">CSS-Grid-Layout</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Responsive_Design\">Responsives Design</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Media_queries\">Grundlagen von Media Query</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension\">Herausforderung: Grundlegendes Verständnis von Layouts</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Scripting\">Dynamisches Scripting mit JavaScript</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/What_is_JavaScript\">Was ist JavaScript?</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/A_first_splash\">Erster Einblick in JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/What_went_wrong\">Was ist schiefgelaufen? JavaScript-Fehlerbehebung</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Variables\">Speichern der benötigten Informationen — Variablen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Math\">Grundlegende Mathematik in JavaScript – Zahlen und Operatoren</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Strings\">Umgang mit Text — Zeichenketten in JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Useful_string_methods\">Nützliche String-Methoden</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Arrays\">Arrays</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Silly_story_generator\">Herausforderung: Blödsinnige Geschichtengenerator</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Conditionals\">Entscheidungen in Ihrem Code treffen — Konditionalen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Loops\">Code-Schleifen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Functions\">Funktionen — wiederverwendbare Codeblöcke</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Build_your_own_function\">Erstellen Sie Ihre eigene Funktion</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Return_values\">Funktionsrückgabewerte</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Events\">Einführung in Ereignisse</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Event_bubbling\">Ereignis-Bubbling</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Image_gallery\">Herausforderung: Bildergalerie</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Object_basics\">JavaScript-Objektgrundlagen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/DOM_scripting\">Einführung in DOM-Scripting</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Network_requests\">Netzwerkanfragen mit JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/JSON\">Arbeiten mit JSON</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript\">Debugging JavaScript and handling errors</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries\">JavaScript-Frameworks und -Bibliotheken</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/Introduction\">Einführung in client-seitige Frameworks</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/Main_features\">Hauptmerkmale von Frameworks</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started\">Erste Schritte mit React</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning\">Beginn unserer React To-Do-Liste</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_components\">Komponenten in unserer React-App erstellen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state\">React Interaktivität: Events und State</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering\">Reaktivität in React: Bearbeiten, Filtern, bedingtes Rendern</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility\">Barrierefreiheit in React</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_resources\">React-Ressourcen</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Accessibility\">Barrierefreiheit</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/What_is_accessibility\">Was ist Barrierefreiheit?</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/Tooling\">Barrierefreiheitstools und unterstützende Technologien</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/HTML\">HTML: Eine gute Grundlage für Barrierefreiheit</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript\">CSS and JavaScript Zugänglichkeitsbest Practices</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics\">WAI-ARIA Grundlagen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/Multimedia\">Barrierefreie Multimedia-Inhalte</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/Mobile\">Mobile Accessibility</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting\">Herausforderung: Barrierefreiheits-Fehlerbehebung</a></li></ol></details></li><li><a href=\"/de/docs/Learn_web_development/Core/Design_for_developers\">Design für Entwickler:innen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Version_control\">Versionskontrolle</a></li><li class=\"section\"><a href=\"/de/docs/Learn_web_development/Extensions\">Erweiterungsmodule</a></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects\">Advanced JavaScript objects</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes\">Objektprototypen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming\">Objektorientierte Programmierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript\">Klassen in JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice\">Objektbaupraxis</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features\">Herausforderung: Hinzufügen von Funktionen zu unserem hüpfenden Ball-Demo</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs\">Client-seitige Web-APIs</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction\">Einführung in Web-APIs</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs\">Video- und Audio-APIs</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics\">Zeichnen von Grafiken</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage\">Client-seitiger Speicher</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs\">Third-party APIs</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS\">Asynchrones JavaScript</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Introducing\">Einführung in asynchrones JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Promises\">Anleitung zur Verwendung von Promises</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API\">Wie man eine Promise-basierte API implementiert</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers\">Einführung in Worker</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations\">Herausforderung: Animationen sequenzieren</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Forms\">Webformulare — Arbeiten mit Benutzerdaten</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Your_first_form\">Ihr erstes Formular</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form\">Wie man ein Webformular strukturiert</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls\">Grundlegende native Formularsteuerungen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/HTML5_input_types\">Die HTML5-Eingabetypen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Other_form_controls\">Andere Formularelemente</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Styling_web_forms\">Styling von Webformularen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling\">Fortgeschrittenes Formular-Styling</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes\">UI-Pseudoklassen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Form_validation\">Client-seitige Formularvalidierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data\">Senden von Formulardaten</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools\">Verständnis für clientseitige Tools</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Overview\">Überblick über Client-seitige Tools</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Package_management\">Grundlagen des Paketmanagements</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain\">Einführung in eine vollständige Werkzeugkette</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Deployment\">Bereitstellung unserer App</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Server-side\">Serverseitige Programmierung</a></summary><ol><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps\">Erste Schritte auf der Serverseite</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction\">Einführung in die Server-Seite</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview\">Überblick über Client-Server</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks\">Server-seitige Web-Frameworks</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security\">Website-Sicherheit</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django\">Django Web-Framework (Python)</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Introduction\">Einführung in Django</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/development_environment\">Einrichten einer Django-Entwicklungsumgebung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website\">Django Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website\">Django-Tutorial Teil 2: Erstellen einer Skelett-Website</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Models\">Django Tutorial Teil 3: Verwenden von Modellen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site\">Django Tutorial Teil 4: Die Django Admin-Seite</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Home_page\">Django Tutorial Teil 5: Erstellen unserer Homepage</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views\">Django Tutorial Teil 6: Generische Listen- und Detailansichten</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Sessions\">Django-Tutorial Teil 7: Sitzungs-Framework</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Authentication\">Django-Tutorial Teil 8: Benutzer-Authentifizierung und -Berechtigungen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Forms\">Django Tutorial Teil 9: Arbeiten mit Formularen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Testing\">Django Tutorial Teil 10: Testen einer Django-Webanwendung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Deployment\">Django-Tutorial Teil 11: Bereitstellung von Django für die Produktion</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security\">Django Webanwendungssicherheit</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog\">Bewertung: DIY Django Mini-Blog</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs\">Express Web-Framework (Node.js)</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction\">Einführung in Express/Node</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment\">Einrichten einer Node-Entwicklungsumgebung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website\">Express Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website\">Express-Tutorial Teil 2: Erstellen einer Skelett-Website</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose\">Express-Tutorial Teil 3: Verwendung einer Datenbank (mit Mongoose)</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes\">Express Tutorial Teil 4: Routen und Controller</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data\">Express Tutorial Teil 5: Bibliotheksdaten anzeigen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms\">Express Tutorial Teil 6: Arbeiten mit Formularen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment\">Express Tutorial Teil 7: Bereitstellung im Produktionsumfeld</a></li></ol></details></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Performance\">Web-Performance</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/why_web_performance\">Das \"Warum\" der Web-Performance</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/What_is_web_performance\">Was ist Web-Performance?</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/Perceived_performance\">Wahrgenommene Leistung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/Measuring_performance\">Leistungsmessung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/Multimedia\">Multimedia: Bilder</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/video\">Multimedia: video</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/JavaScript\">JavaScript-Leistungsoptimierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/HTML\">HTML-Performance-Optimierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/CSS\">CSS-Leistungsoptimierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/business_case_for_performance\">Der geschäftliche Nutzen der Web-Performance</a></li></ol></details></li><li class=\"toggle\"><details open=\"\"><summary><a href=\"/de/docs/Learn_web_development/Extensions/Testing\">Tests</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Introduction\">Einführung in das Cross-Browser-Testing</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Testing_strategies\">Strategien zur Durchführung von Tests</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS\">Umgang mit häufigen HTML- und CSS-Problemen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Feature_detection\">Implementierung der Funktionsprüfung</a></li><li><em><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Automated_testing\" aria-current=\"page\">Einführung in automatisiertes Testen</a></em></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment\">Einrichtung Ihrer eigenen Testautomatisierungsumgebung</a></li></ol></details></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Transform_animate\">CSS transformieren und animieren</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Security_privacy\">Sicherheit und Datenschutz</a></li><li class=\"section\">Weitere Ressourcen</li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Howto\">Häufige Probleme lösen</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Howto/Solve_HTML_problems\">Häufige HTML-Probleme lösen</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Solve_CSS_problems\">Häufige CSS-Probleme lösen</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Solve_JavaScript_problems\">Häufige JavaScript-Probleme lösen</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Web_mechanics\">Webmechanik</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Tools_and_setup\">Tools und Einrichtung</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Design_and_accessibility\">Design und Barrierefreiheit</a></li></ol></details></li><li><a href=\"/de/docs/Learn_web_development/About\">Über</a></li><li><a href=\"/de/docs/Learn_web_development/Educators\">Ressourcen für Lehrkräfte</a></li><li><a href=\"/de/docs/Learn_web_development/Changelog\">Änderungsprotokoll</a></li></ol>","source":{"folder":"de/learn_web_development/extensions/testing/automated_testing","github_url":"https://github.com/mdn/translated-content-de/blob/main/files/de/learn_web_development/extensions/testing/automated_testing/index.md","last_commit_url":"https://github.com/mdn/translated-content-de/commit/452fe502cfb4c9a91c346af17370ecfb6a8bd17e","filename":"index.md"},"summary":"Mehrmals täglich Tests manuell auf verschiedenen Browsern und Geräten durchzuführen, kann mühsam und zeitraubend sein. Um dies effizient zu handhaben, sollten Sie sich mit Automatisierungstools vertraut machen. In diesem Artikel betrachten wir, was verfügbar ist, wie man Task-Runner verwendet, und wie man die Grundlagen kommerzieller Browser-Test-Automatisierungs-Apps wie Sauce Labs, BrowserStack und TestingBot nutzt.","title":"Einführung in automatisiertes Testen","toc":[{"text":"Automatisierung erleichtert die Arbeit","id":"automatisierung_erleichtert_die_arbeit"},{"text":"Verwendung eines Task-Runners zur Automatisierung von Test-Tools","id":"verwendung_eines_task-runners_zur_automatisierung_von_test-tools"},{"text":"Verwendung kommerzieller Testdienste zur Beschleunigung von Browser-Tests","id":"verwendung_kommerzieller_testdienste_zur_beschleunigung_von_browser-tests"},{"text":"Zusammenfassung","id":"zusammenfassung"}],"pageType":"learn-module-chapter"}}</script></body></html>