Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Testing Complex Vscode Extensions With the Power of Web Standards

Testing Complex Vscode Extensions With the Power of Web Standards

According to many surveys VSCode has shown to be the favorite IDE of choice for developers. However, everyone who has tried to build a VSCode extension has realized that testing it from end to end is a difficult endeavor. The VSCode ecosystem has not yet provided the tools to make this simple and efficient. Therefore many extensions are lacking tests especially when they consist of different webviews and panels. This can hurt the developer experience for extension users.

With VSCode being based on top of Electron there are various options to automate it like any other Electron application. Many developers have been using Spectron for their Electron UI tests, but unfortunately this package just got deprecated by the Electron community. To fill the gap the WebdriverIO community has been working on a replacement which integrates nicely into the WebdriverIO ecosystem and helps to test Electron applications even more efficiently with web standards like WebDriver.

In this talk Christian Bromann, Software Engineer at Stateful, will showcase how to write UI tests for Electron applications and particularly will uncover how VSCode extension developers can use this stack to test complex extensions from end to end.

Christian Bromann

May 04, 2022
Tweet

More Decks by Christian Bromann

Other Decks in Technology

Transcript

  1. ѡЏЍЏЏТ4#-$./$)-*())С $ ). 0) -жБСЍ ѡЏЍЏЏТ4#-$./$)-*())С $ ). 0) -жБСЍ

    Í¢ŚĆČ #  *!#*$ !*-()4  1 '*+ -. #//+.УшшЏЍЏЍС.// *!%.С*(ш )жш*/# -ж/**'.ш
  2. ѡЏЍЏЏТ4#-$./$)-*())С $ ). 0) -жБСЍ ѡЏЍЏЏТ4#-$./$)-*())С $ ). 0) -жБСЍ

    #//+.Ушш$).$"#/.С./&*1 -!'*2С*(ш.0-1 4шЏЍЏЎѩ*1 -1$ 2 ÎĬãƔ͓ŏãńČƈ͓Í¢ŚĆČ ¢Ś͓ŽŚŽƜŇãƀ̯ 䚉 $/#*1 -АЍ& 3/ ).$*).*) *!/# -$# . 3/ ).$*) *.4./ (.*0//# - 䚉  -!*-()/ж$/$./# .2 /.+*/ /2 ) / 3/ $/*-.) . 䚉 0).*)  #)*'*"$ .)' 1 -" .  /)-.2# ) 1 -+*..$' 䚉 $)$('Ќ )/0$/$1  .$") 䚉 /Э.+ )*0- Х*-)*/Ш
  3. ѡЏЍЏЏТ4#-$./$)-*())С $ ). 0) -жБСЍ *+ )ж1.3С*-" (-& /+' С1$.0'./0$*С*(ш1.*

    Í¢ŚĆČ͓̻ŚŏŽãƔıþŇČ̼͓iãƀńČƔŽŇãÿČƈ AŚƀ͓*ƹƔČőƈıŚőƈ͓¯ĬãƔ͓¶ƈČ͓ƔĬČ͓Í¢ŚĆČ͓—Nƈ
  4. ѡЏЍЏЏТ4#-$./$)-*())С $ ). 0) -жБСЍ iČČƔ͓iãƀſƜČČ 䚉 -$)".!0''4 3/ ).$'

    #*( .- ) -$"#/$)/** !*-($)$('*)/ 3/ .2$/#$)" 䚉 *)/$).*0/*!*(+' 32 1$ 2./#/ $)/ -/.2$/#*/# -* . *(+*) )/.)$/. 䚉 .*(+' 3*)!$"0-/$*)).//  ()" ( )/ 䚉 ȣ -.А-+-/4 3/ ).$*)./*$)/ "-/  $)/*/# #*( .- ) (-,0 С.// !0'С*(
  5. ѡЏЍЏЏТ4#-$./$)-*())С $ ). 0) -жБСЍ ѡЏЍЏЏТ4#-$./$)-*())С $ ). 0) -жБСЍ

    IČŇŇŚÎŚƀŇĆ͓*ƹƔČőƈıŚő Í¢ŚĆČ͓—N #//+.Ушш* С1$.0'./0$*С*(ш+$ш- ! - ) .ш1.* ж+$
  6. ѡЏЍЏЏТ4#-$./$)-*())С $ ). 0) -жБСЍ ¯ČƈƔıőĥ͓AƜőĆãŏČőƔãŇƈ Ѩ& )/*. т#//+.Ушш/2$// -С*(ш&

    )/*.ш.//0.шЎЎБЎАГВЎЏАЏЖГЍВЎЏЍЎу -/$)*2' - #//+.Ушш(-/$)!*2' -С*(ш'$&$ш ./4-($С#/(' 7KHS\UDPLGLVEDVHGRQWKHDVVXPSWLRQWKDWEURDGVWDFNWHVWVDUHH[SHQVLYHVORZDQGEULWWOHFRPSDUHGWRPRUHIRFXVHGWHVWVVXFKDVXQLWWHVWV:KLOHWKLVLVXVXDOO\ WUXHWKHUHDUHH[FHSWLRQV,IP\KLJKOHYHOWHVWVDUHIDVWUHOLDEOHDQGFKHDSWRPRGLI\WKHQORZHUOHYHOWHVWVDUHQ WQHHGHG
  7. ѡЏЍЏЏТ4#-$./$)-*())С $ ). 0) -жБСЍ ¡ .$)1'$0. -$)+0/ * 2-)$)"Ш

    ÎĬãƔ͓ƔŚ͓¯ČƈƔ͓ãőĆ͓ÎĬãƔ͓ƔŚ͓kŚƔ͓¯ČƈƔ * ./ */* ./ ¡* .'$&*)Ю1 Я 0//*)/-$"" -$' *'Ш * . 3/ ).$*)'*Ш * .$" /+ -.$./ . -$)+0/Ш - #)" . $ 2 - !' /  )-  $ 2 -) 'Ш ¡* .$" /./*-  *)!$"0-/$*)*-- /'4Ш *-
  8. ѡЏЍЏЏТ4#-$./$)-*())С $ ). 0) -жБСЍ ѡЏЍЏЏТ4#-$./$)-*())С $ ). 0) -жБСЍ

    ¯ČƈƔıőĥ͓Í¢ŚĆČ͓ ƴıƔĬ͓ÎČþĆƀıƳČƀNt ĥıƔĬƜþ̮ÿŚŏ̴ƴČþĆƀıƳČƀıŚ́ÿŚŏŏƜőıƔƺ̴ƴĆıŚ́ƳƈÿŚĆČ́ƈČƀƳıÿČ
  9. ѡЏЍЏЏТ4#-$./$)-*())С $ ). 0) -жБСЍ ѡЏЍЏЏТ4#-$./$)-*())С $ ). 0) -жБСЍ

    ĬãŇŇČőĥČƈ͓ ¯ČƈƔıőĥ͓Í¢ŚĆČ͓ *ƹƔČőƈıŚőƈ м-$*0.* '1*-. ) 3/ ).$*))'$! 2$/#$)* .)/$1 ++'$/$*)*-   м*)/$)0*0.#)"$)" ++'$/$*)  ) 1 -4- ' . *!* . ' /*-.) #)" )- &*0-/ ./+$+ '$) м4)($" % /-( 2*-&  1 !-( 2*-&/#/''*2./*/ ./'' &$).*!*! 3/ ).$*).
  10. ѡЏЍЏЏТ4#-$./$)-*())С $ ). 0) -жБСЍ ÍãƀıŚƜƈ͓Í¢ŚĆČ͓AŇãƳŚƀƈ IŚƴ͓ƔŚ͓ãƜƔŚŏãƔČ͓Í¢ŚĆČ͓AŇãƳŚƀƈ̯ *)./ ' (Rtk—(4'

    (ku ' (`'$&tu :HE'ULYHU #-*( -$1 - &KURPH'HY7RROV 3URWRFRO &KURPH'HY7RROV 3URWRFRO /$1 * ++'$/$*) * . ++'$/$*)т С"С1.* С 1у H[WHQVLRQ'HYHORSPHQW3DWK 1.С H[WHQVLRQGHYHORSPHQWSDWK λ
  11. ѡЏЍЏЏТ4#-$./$)-*())С $ ). 0) -жБСЍ ѡЏЍЏЏТ4#-$./$)-*())С $ ). 0) -жБСЍ

    ͓ŚőƔıőƜŚƜƈ͓Ĭãőĥıőĥ͓ŽŽŇıÿãƔıŚő IŚƴ͓ƔŚ͓ƳŚıĆ͓ƀČãńıőĥ͓¢ČŇČÿƔŚƀƈ͓ıőƔƀŚĆƜÿČĆ͓þƺ͓őČƴ͓Í¢ŚĆČ͓ÍČƀƈıŚőƈ̯ ̯ÊħćŌ̹ćƪćź̹É¡̹²N̹úħÞŌĠćƂ̹̐Ƌħć̹¡¡̹ŹƓćźĬćƂ̹ħÞƪć̹Ƌŕ̹ùć̹ ƓŷāÞƋćā̹ćƪćźƱ̹ƋĬŊć̹ƫĬƋħ̹ćƪćź̹źćłćÞƂć̹̐ƋħƓƂ̹ƫć̙ā̹ćŌā̹Ɠŷ̹ƫĬƋħ̹ ŕŌć̹ƂćƋ̹ŕğ̹ƋćƂƋƂ̹ƫŕźĿĬŌĠ̹ğŕź̹¡ƋÞùłć̹ʹ̹ŌŕƋ̹ĬŌƂĬāćźƂ̢̹ƓŌłćƂƂ̹Ƌħć̹ ¡¡̹ŹƓćźĬćƂ̹Þźć̹ƓŷāÞƋćạ̰̄ $Śő͓]ãƺãŏãőőČ Ύ$Śő]ãƺãŏãőőČ ĬƔƔŽƈ̴̨ ̴ĥıƔĬƜþ̮ÿŚŏ̴ŏıÿƀŚƈŚĤƔ̴ƳƈÿŚĆČ́ŁƜŽƺƔČƀ̴ıƈƈƜČƈ̴˧ˣ˦ˢ
  12. ѡЏЍЏЏТ4#-$./$)-*())С $ ). 0) -жБСЍ 䚉 . . /*!'*/*-./-$)". .-$

    ./#  2#*' ++'$/$*)./-0/0- т./-/$)"2$/# /#  -'$ ./.0++*-/ 1 -.$*)Т# - У 1ЎСАДСЍу 䚉 1 -4) 21 -.$*)/#/*( .2$/#'*/*- #)" .- ж 3+*-/.)*1 -2-$/ .'*/*-. !-*(/# . . / 䚉 0/$'$/4!0)/$*)'/ -$(+*-/./# '*/*- !$' /#/$..0$/ !*-4*0-++'$/$*) 1 -.$*) Í¢ŚĆČ͓őãƔŚŏƺ —ãĥČ͓tþŁČÿƔƈ͓ƔŚ͓ƔĬČ͓ƀČƈÿƜČ̫ #//+.Ушш* С1$.0'./0$*С*(ш+$ш- ! - ) .ш 3/ ).$*)ж"0$ '$) .
  13. ѡЏЍЏЏТ4#-$./$)-*())С $ ). 0) -жБСЍ —ãĥČ͓tþŁČÿƔ͓$Čƈıĥő͓BŚãŇƈ ƜıŇĆ͓ã͓¢ıŏŽŇČ͓þƜƔ͓—ŚƴČƀĤƜŇ͓—ãĥČ͓tþŁČÿƔ͓iŚĆČŇ 䚉 -).!*-( '

    /*-.$)/* -$1 - ' ( )/. 䚉 .  ' ( )/*+/$*)''4 !$)' 1$+"  *% /'*/*-. 䚉 $'$/4/*0. +-( / -$5 . ' /*-. 䚉 1*$(0/$'$/4*!" % /. 䚉 *+ +" *% //*) ' ( )/)''$/. .0. ,0 )/ ' ( )/,0 -$ ./*$/ 䚉 4+ -$+/0++*-/ 䚉 0/*ж" ) -/ *0( )//$*)!*-''"  % /.$)'0$)"/# $-( /#*.) ' ( )/.
  14. ѡЏЍЏЏТ4#-$./$)-*())С $ ). 0) -жБСЍ 䚉 -).!*-( ' /*-.$)/* -$1

    - ' ( )/. 䚉 .  ' ( )/*+/$*)''4 !$)' 1$+"  *% /'*/*-. 䚉 $'$/4/*0. +-( / -$5 . ' /*-. 䚉 1*$(0/$'$/4*!" % /. 䚉 *+ +" *% //*) ' ( )/)''$/. .0. ,0 )/ ' ( )/,0 -$ ./*$/ 䚉 4+ -$+/0++*-/ 䚉 0/*ж" ) -/ *0( )//$*)!*-''"  % /.$)'0$)"/# $-( /#*.) ' ( )/. ƜıŇĆ͓ã͓¢ıŏŽŇČ͓þƜƔ͓—ŚƴČƀĤƜŇ͓—ãĥČ͓tþŁČÿƔ͓iŚĆČŇ —ãĥČ͓tþŁČÿƔ͓$Čƈıĥő͓BŚãŇƈ
  15. ѡЏЍЏЏТ4#-$./$)-*())С $ ). 0) -жБСЍ ƜıŇĆ͓ã͓¢ıŏŽŇČ͓þƜƔ͓—ŚƴČƀĤƜŇ͓—ãĥČ͓tþŁČÿƔ͓iŚĆČŇ 䚉 -).!*-( ' /*-.$)/*

    -$1 - ' ( )/. 䚉 .  ' ( )/*+/$*)''4 !$)' 1$+"  *% /'*/*-. 䚉 $'$/4/*0. +-( / -$5 . ' /*-. 䚉 1*$(0/$'$/4*!" % /. 䚉 *+ +" *% //*) ' ( )/)''$/. .0. ,0 )/ ' ( )/,0 -$ ./*$/ 䚉 4+ -$+/0++*-/ 䚉 0/*ж" ) -/ *0( )//$*)!*-''"  % /.$)'0$)"/# $-( /#*.) ' ( )/. —ãĥČ͓tþŁČÿƔ͓$Čƈıĥő͓BŚãŇƈ
  16. ѡЏЍЏЏТ4#-$./$)-*())С $ ). 0) -жБСЍ ƜıŇĆ͓ã͓¢ıŏŽŇČ͓þƜƔ͓—ŚƴČƀĤƜŇ͓—ãĥČ͓tþŁČÿƔ͓iŚĆČŇ 䚉 -).!*-( ' /*-.$)/*

    -$1 - ' ( )/. 䚉 .  ' ( )/*+/$*)''4 !$)' 1$+"  *% /'*/*-. 䚉 $'$/4/*0. +-( / -$5 . ' /*-. 䚉 1*$(0/$'$/4*!" % /. 䚉 *+ +" *% //*) ' ( )/)''$/. .0. ,0 )/ ' ( )/,0 -$ ./*$/ 䚉 4+ -$+/0++*-/ 䚉 0/*ж" ) -/ *0( )//$*)!*-''"  % /.$)'0$)"/# $-( /#*.) ' ( )/. —ãĥČ͓tþŁČÿƔ͓$Čƈıĥő͓BŚãŇƈ
  17. ѡЏЍЏЏТ4#-$./$)-*())С $ ). 0) -жБСЍ ƜıŇĆ͓ã͓¢ıŏŽŇČ͓þƜƔ͓—ŚƴČƀĤƜŇ͓—ãĥČ͓tþŁČÿƔ͓iŚĆČŇ 䚉 -).!*-( ' /*-.$)/*

    -$1 - ' ( )/. 䚉 .  ' ( )/*+/$*)''4 !$)' 1$+"  *% /'*/*-. 䚉 $'$/4/*0. +-( / -$5 . ' /*-. 䚉 1*$(0/$'$/4*!" % /. 䚉 *+ +" *% //*) ' ( )/)''$/. .0. ,0 )/ ' ( )/,0 -$ ./*$/ 䚉 4+ -$+/0++*-/ 䚉 0/*ж" ) -/ *0( )//$*)!*-''"  % /.$)'0$)"/# $-( /#*.) ' ( )/. —ãĥČ͓tþŁČÿƔ͓$Čƈıĥő͓BŚãŇƈ
  18. ѡЏЍЏЏТ4#-$./$)-*())С $ ). 0) -жБСЍ ƜıŇĆ͓ã͓¢ıŏŽŇČ͓þƜƔ͓—ŚƴČƀĤƜŇ͓—ãĥČ͓tþŁČÿƔ͓iŚĆČŇ 䚉 -).!*-( ' /*-.$)/*

    -$1 - ' ( )/. 䚉 .  ' ( )/*+/$*)''4 !$)' 1$+"  *% /'*/*-. 䚉 $'$/4/*0. +-( / -$5 . ' /*-. 䚉 1*$(0/$'$/4*!" % /. 䚉 *+ +" *% //*) ' ( )/)''$/. .0. ,0 )/ ' ( )/,0 -$ ./*$/ 䚉 4+ -$+/0++*-/ 䚉 0/*ж" ) -/ *0( )//$*)!*-''"  % /.$)'0$)"/# $-( /#*.) ' ( )/. —ãĥČ͓tþŁČÿƔ͓$Čƈıĥő͓BŚãŇƈ "$/#0С*(ш2 -$1 -$*ж*((0)$/4ш2$*ж1.* ж. -1$ ш'*ш($)ш.-ш+" *% /.ш0/$'.С/.ѩ Дж ВЍ
  19. ѡЏЍЏЏТ4#-$./$)-*())С $ ). 0) -жБСЍ ƜıŇĆ͓ã͓¢ıŏŽŇČ͓þƜƔ͓—ŚƴČƀĤƜŇ͓—ãĥČ͓tþŁČÿƔ͓iŚĆČŇ 䚉 -).!*-( ' /*-.$)/*

    -$1 - ' ( )/. 䚉 .  ' ( )/*+/$*)''4 !$)' 1$+"  *% /'*/*-. 䚉 $'$/4/*0. +-( / -$5 . ' /*-. 䚉 1*$(0/$'$/4*!" % /. 䚉 *+ +" *% //*) ' ( )/)''$/. .0. ,0 )/ ' ( )/,0 -$ ./*$/ 䚉 4+ -$+/0++*-/ 䚉 0/*ж" ) -/ *0( )//$*)!*-''"  % /.$)'0$)"/# $-( /#*.) ' ( )/. —ãĥČ͓tþŁČÿƔ͓$Čƈıĥő͓BŚãŇƈ